uniapp微信小程序——微信授权登录并获得头像

目录
前言：
准备 ：
授权登录：                                                                                                                       
前端实现：
标签部门：
js部门：实现getUserInfo方法
getUserInfo方法全代码 
后端实现：
获取头像：                                                                                                                       

---

前言：

   在做微信小程序时，不可制止需要调取用户的身份，那么就要用到微信官方的授权码去换用户信息。
  焦点思路：
  用户点击登录——同意微信授权——通过uni.getUserProfile获得用户的code——将code传递给后端，后端携带code请求微信官方接口获得用户信息返回
  准备 ：

在这之前需要准备的：起首在微信小程序助手中获得注册小程序时绑定的

• 小程序APPID
  
• 小程序秘钥secret 
  

授权登录：                                                                                                                       

前端实现：

标签部门：

我们准备一个button用来让用户点击拉起微信授权登录

1. <view>
2.     <button @click="getUserInfo">微信登录</button>
3. </view>

复制代码

js部门：实现getUserInfo方法

内里计划到的API：
uni.showLoading：展示加载框

1. uni.showLoading({
2.     // 展示加载框
3.     title: '加载中'
4. })

复制代码

 uni.getUserProfile（）：获取用户信息

1. getUserInfo(e) {
2.         var that = this
3.         uni.showLoading({
4.                 // 展示加载框
5.                 title: '加载中'
6.         })
7.         uni.getUserProfile({
8.                 //获取到用户信息
9.                 desc: '登录后可同步数据', // 必须要有一个desc字段
10.                 success: async (obj) => {
11.             // 调用uni.login接口
12.         // 调用uni.login接口
13.         // 调用uni.login接口
14.         // 调用uni.login接口
15.                 },
16.                 fail: () => {
17.                         uni.showToast({
18.                                 title: '授权已取消',
19.                                 icon: 'error',
20.                                 mask: true
21.                         })
22.                 },
23.                 complete: () => {
24.                         // 隐藏loading
25.                         uni.hideLoading()
26.                 }
27.         })
28. }

复制代码

 uni.login()：用户进行登录获取code

1. uni.login({
2.         provider: 'weixin',
3.         success: async (res) => {
4.                 console.log(res)
5.         // 打印res信息，里面只有{errMsg: "login:ok"，code: "你的code"}
6.                 that.code = res.code
7.                 // 请求登录，调用后端接口，我这里是自己封装了后端接口wxLogin，将code传递过去
8.                 const data = await wxLogin({ code: that.code })
9.                 if (data.data.code == 200) {
10.                         uni.showToast({
11.                                 title: '授权登录成功！',
12.                                 mask: true,
13.                                 icon: 'success'
14.                         })
15.             // data.data为后端返回的用户信息
16.                         this.login(data.data)
17.                 }
18.         }
19. })

复制代码

getUserInfo方法全代码 

1. //微信授权登录
2.                 getUserInfo(e) {
3.                         var that = this
4.                         uni.showLoading({
5.                                 // 展示加载框
6.                                 title: '加载中'
7.                         })
8.                         uni.getUserProfile({
9.                                 //获取到用户信息
10.                                 desc: '登录后可同步数据',
11.                                 success: async (obj) => {
12.                                         // 调用 action ，请求登录接口
13.                                         uni.hideLoading()
14.                                         uni.login({
15.                                                 provider: 'weixin',
16.                                                 success: async (res) => {
17.                                                         console.log(res)
18.                                                         that.code = res.code
19.                                                         // 请求登录
20.                                                         const data = await wxLogin({ code: that.code })
21.                                                         if (data.data.code == 200) {
22.                                                                 uni.showToast({
23.                                                                         title: '授权登录成功！',
24.                                                                         mask: true,
25.                                                                         icon: 'success'
26.                                                                 })
27.                                                                 this.login(data.data)
28.                                                         }
29.                                                 }
30.                                         })
31.                                 },
32.                                 fail: () => {
33.                                         uni.showToast({
34.                                                 title: '授权已取消',
35.                                                 icon: 'error',
36.                                                 mask: true
37.                                         })
38.                                 },
39.                                 complete: () => {
40.                                         // 隐藏loading
41.                                         uni.hideLoading()
42.                                 }
43.                         })
44.                 },
45.                 login(data) {
46.                         uni.setStorageSync('huoli-token', data.data.token)
47.                         uni.setStorageSync('huoli-id', data.data.id)
48.                 }

复制代码

后端实现：

后端接收到前端传来的code，调用微信官方接口请求数据
这里在前端采用uni.request进行代码演示

1. uni.request({
2.                 url: 'https://api.weixin.qq.com/sns/jscode2session',// 请求微信服务器
3.         method:'GET',
4.                 data: {
5.                         appid: '你的小程序的APPID'         //你的小程序的APPID
6.                         secret: '你的小程序秘钥secret',    //你的小程序秘钥secret
7.                         js_code: code,                    //uni.login 登录成功后的code
8.                         grant_type:'authorization_code'   // 固定写死的，不用变
9.                 ,
10.                 success: (res) => {
11.                         // console.log('获取信息',res);  // 换取成功后 暂存这些数据 留作后续操作
12.                         this.openid=res.data.openid    //openid 用户唯一标识
13.                         this.session_key=res.data.session_key    //session_key  会话密钥
14.             // 把这些信息存起来即可
15.                         })
16.                 }
17.         });

复制代码

获取头像：                                                                                                                       

1. <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">授权头像</button>
2. onChooseAvatar(e) {
3.         this.showing = true
4.         let that = this
5.         that.imgurl = e.detail.avatarUrl
6. }

复制代码

这步就是通过 chooseAvatar 方法获取到用户头像信息，同时也可以选取相册照片当头像，e.detail.avatarUrl就是微信头像的临时地址，通过uni.uploadFile方法储存到服务器上

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。