<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>網站應用微信登錄 DEMO</title>
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
</head>
<body>
<div id="wx_login_container"></div>
<script>
// 獲取當前時間戳精確點分鐘
function getTimestamp() {
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1;
const day = date.getDate();
const hour = date.getHours();
const minute = date.getMinutes();
return `${year}${month}${day}${hour}${minute}`;
}
const timestamp = getTimestamp();
console.log('timestamp:', timestamp);
const obj = new WxLogin({
self_redirect: false,// true：手機點擊確認登錄後可以在 iframe 內跳轉到 redirect_uri，false：手機點擊確認登錄後可以在 top window 跳轉到 redirect_uri。默認爲 false。
id: "wx_login_container",// 第三方頁面顯示二維碼的容器id
appid: "wx5f8067d4c106894b",// 應用唯一標識，在微信開放平臺提交應用審覈通過後獲得
scope: "snsapi_login",// 應用授權作用域，擁有多個作用域用逗號（,）分隔，網頁應用目前僅填寫snsapi_login即可
redirect_uri: "http://www.baidu.com,// 重定向地址，需要進行UrlEncode
state: "wx_login",// 用於保持請求和回調的狀態，授權請求後原樣帶回給第三方。該參數可用於防止csrf攻擊（跨站請求僞造攻擊），建議第三方帶上該參數，可設置爲簡單的隨機數加session進行校驗
style: "",// 提供"black"、"white"可選，默認爲黑色文字描述。詳見文檔底部FAQ
href: "https://web-1300736413.file.myqcloud.com/assets/css/wx-qrcode-login/wx-login.css?t=" + timestamp // 自定義樣式鏈接，第三方可根據實際需求覆蓋默認樣式。詳見文檔底部FAQ
});
// 獲取 wx_login_container 元素下的 iframe 並設置寬高爲 200px
const iframe = document.querySelector('#wx_login_container iframe');
iframe.style.width = '200px';
iframe.style.height = '200px';
</script>
</body>
</html>
網站應用微信登錄 DEMO
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章