开发公众号的登录逻辑

2022-05-24 11:35:34 阅读：160 来源： 互联网

标签：逻辑 code console 登录公众 token let appid link

不管是写公众号还是写小程序时都涉及到一个登录逻辑。那么我的登录逻辑大概是不管页面进入哪个页面，先调用用户信息接口，当返回token过期或不存在token的情况，token过期的话就在响应拦截器中将token值清除掉。接着就会涉及到去拿code,从而拿到openid或者token值。

后端提供：appid 回调地址

1.进行授权需了解这篇文章：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html。

配置好链接

2.在你需要拿code的地方

// 拿到code
            getCode() {
                //获取当前页面的url
                let link = window.location.href;
                console.log('我是请求的url')
                console.log(link)
                // let link = 'http://xxxxxx.com/?code=001vGk&state=123#/';
                let code = null;
                // 判断link中有没有code=字符串，  
                if (link.indexOf('code=') == -1) {
                    console.log('我是需要授权页的判断')
                    //没有code= 发请求
                    let appid = '你自己的appid'; // 公众号的固定appid
                    let uri = encodeURIComponent(link); // 编码后的回调地址
                    let authURL =
                        `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`; 
                   //url应该是后端提供的一个线上地址                
                    window.location.href = authURL;
                } else {
                    console.log('我是授权成功后跳转的页面')
                    let temp = decodeURIComponent((new RegExp('[?|&]' + 'code' + '=' + '([^&;]+?)(&|#|;|$)').exec(link) ||
                        [, ''])[1].replace(/\+/g, '%20')) || null
                    //  回调函数已经执行 返回的链接存在code= 地址解析
                    this.code = temp;
                    console.log('我是code的值')
                    console.log(this.code)
                }
            },

3.拿到token后即可调取静默登录接口

注意：

    let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_base&state=123#wechat_redirect`; 
                   //url应该是后端提供的一个线上地址   
其中的redirect_uri会强制重定向到你给的地址，测试时应该在微信开发者工具中测试。

标签：逻辑,code,console,登录,公众,token,let,appid,link
来源： https://www.cnblogs.com/-123456/p/16304879.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

开发公众号的登录逻辑