<template>
	<div id="app">
		<h1>微信授權(quán)登陸</h1>
		<div>
			<div>
				<span>手機(jī)號(hào)</span>&nbsp;&nbsp;
				<input type="number" :value="account" placeholder="請(qǐng)輸入手機(jī)號(hào)">
			</div>
			<br>
			<div>
				<span>驗(yàn)證碼</span>&nbsp;&nbsp;
				<input type="text" :value="smsCode" placeholder="請(qǐng)輸入驗(yàn)證碼" maxlength="6">
			</div>
			<br>
			<button @click="init">授權(quán)登陸</button>
			<p>{{code}}</p>
		</div>
	</div>
</template>

<script>
	/**
	 * @description
	 * 
	 * 官方網(wǎng)文檔地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
	 * 
	 * 網(wǎng)頁(yè)授權(quán)步驟
	 * 
	 * 1、拼接授權(quán)地址
	 * 2、訪問(wèn)授權(quán)地址
	 * 3、微信回調(diào)攜帶 code 參數(shù)
	 * 4、code 發(fā)送給服務(wù)器獲取 openId token 等信息 結(jié)束
	 * 
	 * 注意事項(xiàng)：
	 *  1、redirect_uri 重定向地址.
	 *	 	1）線上環(huán)境：該參數(shù)是對(duì)應(yīng)線上的域名，例如：https:xxx.web.com/ 這個(gè)地址要可以訪問(wèn)到你的 web 項(xiàng)目
	 * 		2）開(kāi)發(fā)環(huán)境：可能訪問(wèn)路徑是：http://192.168.0.18:8080 但是這是內(nèi)網(wǎng)地址，外網(wǎng)無(wú)法訪問(wèn)需要借助 內(nèi)網(wǎng)穿透 工具
	 * 		把內(nèi)網(wǎng)映射到外網(wǎng) 例如： http://n9yjxe.natappfree.cc -> 127.0.0.1:8080 我這里就可以填寫(xiě) http://n9yjxe.natappfree.cc/ 這個(gè)地址
	 * 
	 * 2、微信公眾號(hào)管理端配置 https://mp.weixin.qq.com/cgi-bin/settingpage?t=setting/function&action=function&token=1538596787&lang=zh_CN
	 * 		1）設(shè)置與開(kāi)發(fā)->公眾號(hào)設(shè)置->功能設(shè)置->網(wǎng)頁(yè)授權(quán)域名，配置你對(duì)應(yīng)的線上域名或內(nèi)網(wǎng)穿透域名，是域名沒(méi)有http://或https:// 訪問(wèn)路徑等
	 * 		2）文件校驗(yàn)域名，這個(gè)步驟是微信要驗(yàn)證你的域名，放在域名根路徑下要可以訪問(wèn)到 例如：https:xxx.web.com/MP_verify_JrxFeFmrqcxyTPAW.txt 即可
	 * 		3）如果是開(kāi)發(fā)環(huán)境，MP_verify_JrxFeFmrqcxyTPAW 放在項(xiàng)目 public 開(kāi)啟內(nèi)網(wǎng)穿透就可以了
	 * 3、內(nèi)網(wǎng)穿透 https://natapp.cn/
　　　　 * 4、使用微信開(kāi)發(fā)工具進(jìn)行網(wǎng)頁(yè)調(diào)試，需要把自己添加為微信公眾號(hào)的開(kāi)發(fā)者才可以
	 * 
	 */

	// 微信授權(quán)登陸地址
	const WX_AUTH_URL = 'https://open.weixin.qq.com/connect/oauth2/authorize?';
	// 重定向參數(shù)-固定寫(xiě)法
	const REDIRECT = '#wechat_redirect';
	export default {
		data() {
			return {
				account: '',
				smsCode: '',
				params: {
					appid: 'wxca62acc6a4560ddc', // 公眾號(hào) APP ID 
					redirect_uri: `${encodeURI('http://n9yjxe.natappfree.cc/')}`, // 授權(quán)后重定向的回調(diào)鏈接地址， 請(qǐng)使用 urlEncode 對(duì)鏈接進(jìn)行處理
					response_type: 'code', // 固定寫(xiě)法
					scope: 'snsapi_base' // snsapi_base 靜默授權(quán)獲取 open id ；snsapi_userinfo 需要用戶授權(quán)，獲取詳細(xì)信息
					// state:'code', // a-zA-Z0-9的參數(shù)值，最多128字節(jié)
				},
				code: '', // 微信返回 code
			}
		},
		created() {
			// 獲取地址參數(shù)
			const params = new URLSearchParams(location.search);
			this.code = params.get('code');
			console.log(this.code)
		},
		methods: {
			init() {
				// 訪問(wèn)地址
				const access_url = WX_AUTH_URL + `${new URLSearchParams(this.params)}` + REDIRECT;
				// 這些需要判斷沒(méi)有 code 情況拉起授權(quán)登陸，有就結(jié)束放在重復(fù)拉起授權(quán)登陸
				if (!this.code) {
					location.href = access_url;
				}
			}
		}
	}
</script>

<style>
	button {
		background-image: linear-gradient(219deg, #00A45A 0%, #03CE72 100%);
		color: #FFFFFF;
		width: 100%;
		height: 42px;
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(0, 164, 90, 0.08);
		border-radius: 48px;
		font-size: 38rpx;
		border: none;
	}

	input {
		height: 29px;
		width: 90%;
		border-radius: 10px;
		border: 1px solid #cfcfcf;
		padding: 2px 13px;
	}
</style>

 效果圖