超全、超简单Vue微信公众号授权登录指南

<template>
	<div id="app">
		<h1>微信授权登陆</h1>
		<div>
			<div>
				<span>手机号</span>&nbsp;&nbsp;
				<input type="number" :value="account" placeholder="请输入手机号">
			</div>
			<br>
			<div>
				<span>验证码</span>&nbsp;&nbsp;
				<input type="text" :value="smsCode" placeholder="请输入验证码" maxlength="6">
			</div>
			<br>
			<button @click="init">授权登陆</button>
			<p>{{code}}</p>
		</div>
	</div>
</template>

<script>
	/**
	 * @description
	 * 
	 * 官方网文档地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
	 * 
	 * 网页授权步骤
	 * 
	 * 1、拼接授权地址
	 * 2、访问授权地址
	 * 3、微信回调携带 code 参数
	 * 4、code 发送给服务器获取 openId token 等信息 结束
	 * 
	 * 注意事项：
	 *  1、redirect_uri 重定向地址.
	 *	 	1）线上环境：该参数是对应线上的域名，例如：https:xxx.web.com/ 这个地址要可以访问到你的 web 项目
	 * 		2）开发环境：可能访问路径是：http://192.168.0.18:8080 但是这是内网地址，外网无法访问需要借助 内网穿透 工具
	 * 		把内网映射到外网 例如： http://n9yjxe.natappfree.cc -> 127.0.0.1:8080 我这里就可以填写 http://n9yjxe.natappfree.cc/ 这个地址
	 * 
	 * 2、微信公众号管理端配置 https://mp.weixin.qq.com/cgi-bin/settingpage?t=setting/function&action=function&token=1538596787&lang=zh_CN
	 * 		1）设置与开发->公众号设置->功能设置->网页授权域名，配置你对应的线上域名或内网穿透域名，是域名没有http://或https:// 访问路径等
	 * 		2）文件校验域名，这个步骤是微信要验证你的域名，放在域名根路径下要可以访问到 例如：https:xxx.web.com/MP_verify_JrxFeFmrqcxyTPAW.txt 即可
	 * 		3）如果是开发环境，MP_verify_JrxFeFmrqcxyTPAW 放在项目 public 开启内网穿透就可以了
	 * 3、内网穿透 https://natapp.cn/
　　　　 * 4、使用微信开发工具进行网页调试，需要把自己添加为微信公众号的开发者才可以
	 * 
	 */

	// 微信授权登陆地址
	const WX_AUTH_URL = 'https://open.weixin.qq.com/connect/oauth2/authorize?';
	// 重定向参数-固定写法
	const REDIRECT = '#wechat_redirect';
	export default {
		data() {
			return {
				account: '',
				smsCode: '',
				params: {
					appid: 'wxca62acc6a4560ddc', // 公众号 APP ID 
					redirect_uri: `${encodeURI('http://n9yjxe.natappfree.cc/')}`, // 授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理
					response_type: 'code', // 固定写法
					scope: 'snsapi_base' // snsapi_base 静默授权获取 open id ；snsapi_userinfo 需要用户授权，获取详细信息
					// state:'code', // a-zA-Z0-9的参数值，最多128字节
				},
				code: '', // 微信返回 code
			}
		},
		created() {
			// 获取地址参数
			const params = new URLSearchParams(location.search);
			this.code = params.get('code');
			console.log(this.code)
		},
		methods: {
			init() {
				// 访问地址
				const access_url = WX_AUTH_URL + `${new URLSearchParams(this.params)}` + REDIRECT;
				// 这些需要判断没有 code 情况拉起授权登陆，有就结束放在重复拉起授权登陆
				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>

 效果图