前言
这篇文章带大家掌握 从0到1实现微信公众平台授权登录
- 微信公众号授权登录到底哪几步
- 回调地址，安全域名怎么配置
- 代码怎么写
- 出了问题怎么办
一、微信公众号授权登录到底哪几步
官方文档介绍
编辑
文档看似很复杂，实际上前端只需要两步：
1、去访问微信提供的一个url地址
两种的区别是：scope为snsapi_base和scope为snsapi_userinfo，区别就是是否弹出用户授权；
| 应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过 openid 拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ） |
这个地址需要你配置的地方有：appid(微信公众号id)和redirect_uri（回调地址）
2、访问这个地址后，微信会回跳你设置的redirect_uri地址，并且带回来一个code，
把这个code传给后台，后台去访问微信的接口，获取用户的openid和access_token,
到这里也用实现了微信的授权登录。
二、回调地址，安全域名怎么配置
- 1、在申请到认证公众号之前，你可以先通过测试号申请系统，快速申请一个接口测试号，立即开始接口测试开发。（测试号申请地址）
redirect_uri的配置：
只需要配置回调域名(请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头；)。
(1)打开微信公众号测试号（方便开发调式），修改js安全域名，也可以设置192的地址
编辑
（2）找到体验接口权限表-网页账户-修改
编辑
（3）设置回调域名
编辑
（4）微信公众号正式号设置
编辑
编辑
三、代码怎么写
代码如下（示例）：
<template> <div class="login"></div> </template> <script> import { login } from "@/api/login.js"; import indexConfig from "@/config/index.config"; export default { data() { return {}; }, created() { this.isWXBrowser = this.isWXBrowser(); if (this.isWXBrowser) { let code = this.getUrlCode("code"); if (code) { this.wxLogin(code); //后台登录 } else { this.getWeChatCode(); //微信授权 } } }, onload() {}, mounted() {}, methods: { //判断是否是微信内置的浏览器 isWXBrowser() { return ( String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger" ); }, //截取地址栏code getUrlCode(name) { return ( decodeURIComponent( (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec( location.href ) || [, ""])[1].replace(/\+/g, "%20") ) || null ); }, //访问微信地址，用来获取code getWeChatCode() { let local = encodeURIComponent(window.location.href); //获取当前页面地址作为回调地址 let appid = indexConfig.weixinAppId; //通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】 window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + local + "&response_type=code&scope=snsapi_base&state=1#wechat_redirect"; }, //把code传递给后台接口，静默登录 wxLogin(code) { login(code).then((res) => { if (res.success) { uni.setStorageSync("token", res.data.session.token); uni.setStorageSync("userid", res.data.session.userid); uni.navigateTo.push({ route: "/pages/works/index", }); } else { uni.showToast({ title: res.msg, duration: 3000, icon: "none", }); return; } }); }, }, }; </script> <style lang="scss" scoped> </style>
四、出现问题怎么办
在开发出现问题时，可以通过接口调用的返回码，以及报警排查指引（在公众平台官网 - 开发者中心处可以设置接口报警），来发现和解决问题
最后
✨原创不易，还希望各位大佬支持一下 ！
👍 点赞，你的认可是我创作的动力！
⭐️收藏，你的青睐是我努力的方向！
✏️评论，你的意见是我进步的财富！
