# 前言 > 微信小程序登录`鉴权流程`如下： > > 因`wx.getUserProfile`与`wx.getUserInfo`接口被收回了，都不能弹出授权窗口，只能使用[头像昵称填写能力](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html)去获取微信用户信息。 > > **`在鉴权页面如下操作`**： > > 1、在`onShow`中调用微信登录`wx.login`获取到唯一的code(用来获取`openid`)； > > 2、根据`wx.login`获取的code调用后台接口来获取openid； > > 3、根据获取openid调用后台接口获取`token`，`是否存在token`：有`token`进入首页，没有则返回`登录页面` > （**以下将讲解如何使用微信绑定的`手机号码一键登录`小程序**）。 # 最终效果 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a2d84a332cbc43ca9bed3ae11ebbace4~tplv-k3u1fbpfcp-zoom-1.image) # 鉴权流程如下(鉴权页面:auth.vue)： ## 1、在`onShow`中调用微信登录`wx.login`获取到唯一的code ```js onShow() { // 调用微信登录wx.login this.logining() }, methods: { logining() { wx.showLoading({ title: '登录微信用户', mask: true }) wx.login({ success: (res) => { if (res.code) { wx.hideLoading() this.code = res.code // console.log('wx.login获得code成功', res) // vuex中的openId/unionId若存在就直接调用获取token接口 if (this.openId) { this.getAccessToken(this.openId) } else { this.getOpenId({ code: this.code }) } } else { console.log('获取用户登录态失败！' + res.errMsg) } }, fail(err) { wx.hideLoading() wx.showToast({ title: 'wx.login失败' + err, icon: 'none', duration: 1000 }) } }) }, } ``` ## 2、根据`wx.login`获取的code调用后台接口来获取openid ```js methods: { // 获取openid async getOpenId(parameter) { wx.showLoading({ title: '获取openId', mask: true }) const res = await this.$http('getOpenId', parameter) console.log('获取openId', res) wx.hideLoading() if (res.success) { // 生成唯一值 this.setOpenId(res.data.openid) // console.log('获取openId---值', res.data.openid) this.getAccessToken(res.data.openid) } } } ``` ## 3、根据获取openid调用后台接口获取`token` ```js methods: { // 获取token async getAccessToken(openId) { const res = await this.$http('getAccessToken', { openid: openId }) // console.log('获取token', res) if (res.success) { if (res.data) { this.isShowPhone = false this.setToken(res.data) this.$reLaunch('/pages/tabbarPage/main') } else { // 是否显示一键登录按钮 this.isShowPhone = true } } }, ``` # 如何使用微信绑定的手机号码`实现一键登录`小程序 ## 1、[微信小程序开发文档地址](https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html) ## 2、步骤及注意事项： > 1、因为需要`用户主动触发`才能发起获取手机号接口，所以该功能不由 API 来调用，需用 `button` 组件的点击来触发。 > > 2、需要将`button`组件 `open-type` 的值设置为 `getPhoneNumber`，当用户点击并`允许`之后，可以通过 `bindgetphonenumber` 事件回调获取到动态令牌`code`，根据code调用`phonenumber.getPhoneNumber`接口，消费code来换取用户手机号。每个code有效期为5分钟，且只能消费一次。 > > **注：`getPhoneNumber` 返回的` code` 与 `wx.login` 返回的 `code` 作用是不一样的，不能混用。** ## 3、页面使用 ```html ``` ## 4、页面效果截图如下 ### 1、初始页面如下： > ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e8e48315dd247d28796b98a04a90a7f~tplv-k3u1fbpfcp-zoom-1.image) ## 2、点击按钮后如下： > ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8c72330b80f84cbc8f20558b4a4f9b22~tplv-k3u1fbpfcp-zoom-1.image) ## 3、点击`不允许`后如下： > ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1d8e45d52f0543b8be88d7ea3982f89f~tplv-k3u1fbpfcp-zoom-1.image) ## 4、点击`允许`后(直接进入首页)如下： > ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c08ad40822d4c8bbd736310c532f5e5~tplv-k3u1fbpfcp-zoom-1.image) # 鉴权页面:auth.vue代码如下： ```html ``` # 源码地址 [gitHub地址](https://github.com/wocwin/t-mobile-form) [码云地址](https://gitee.com/wocwin/t-mobile-form) # 其他文章 [Vue3 + Vite + Ts开源后台管理系统模板](https://github.com/wocwin/wocwin-admin) *** [基于ElementUi或AntdUI再次封装基础组件文档](https://wocwin.github.io/t-ui/) *** [基于Element-plus再次封装基础组件文档(vue3+ts)](https://wocwin.github.io/t-ui-plus/)