微信小程序登录认证

前言

为了顺应国内用户的使用习惯,MemFire Cloud 的SDK推出了微信可以在不同应用场景下的登录方式,以下两种场景是MemFire Cloud 推荐的微信登录方式,我们以简单的小示例来做示范,具体的实现还需要根据业务自身的场景来判断。

① 微信用户授权登录#

首次进入小程序,点击登录后会立即跳转个人中心页进行个人资料的修改,或者可以点击个人中心页面进行个人资料的修改

前提条件:

  • 在MemFire Cloud认证服务商页面启用微信小程序认证

微信认证

图例

微信认证 微信认证 微信认证 微信认证

首页代码示例:

html

1  <button style="border-radius: 100rpx;margin-top: 300rpx;" type="primary" bindtap="login">微信快速登录</button>

SDK使用教程

signInWithWechat接口接受一个wx.login返回的code参数,通过code兑换微信用户的信息,并判断用户是否存在,不存在则自动创建

1// pages/main/index.ts
2import { supabase } from '../../lib/supabase'
3Page({
4  data: {
5
6  },
7  login(){
8    wx.login({
9      success: async res => {
10        const { data, error } = await supabase.auth.signInWithWechat({code:res.code})
11        if(error){
12          wx.showToast({
13            title: error?.error || error?.msg,
14            icon: "none",
15            duration: 2000
16          })
17        }else if(data){
18          setTimeout(() => {
19            wx.showModal({
20              title: '提示',
21              content: '登录成功!去填充个人资料吧!',
22              success (res) {
23                if (res.confirm) {
24                  wx.switchTab({
25                    url:'/pages/me/index'
26                  })
27                } else if (res.cancel) {
28                }
29              }
30            })
31          }, 1000);
32        }
33      },
34      fail(err){
35        wx.showToast({
36          title: err.errMsg,
37          icon: "none",
38          duration: 2000
39        })
40      }
41    })
42  },
43
44})

个人中心页面

html

1
2<view class="container">
3  <view style="margin-bottom:20rpx">修改个人信息</view>
4
5</view>
6<!--昵称-->  
7<view class="section">
8  <view class="section-title">昵称:</view>
9  <view>
10    <input type="text"  bindinput='getNickNameValue' name="getNickNameValue" value="{{nikeName}}" placeholder="请输入昵称"/>
11  </view>
12</view>
13<!--头像--> 
14<view class="section">
15  <view class="section-title">头像:</view>
16  <view>
17    <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
18    <text wx:if="{{!avatarUrl}}">点我获取头像</text>
19    <image wx:else class="avatar" src="{{avatarUrl}}"></image>
20</button> 
21  </view>
22</view>
23<view class="section">
24  <view wx:if="{{phone}}" class="section-title">{{phone}}</view>
25  <view wx:else class="section-title">手机</view>
26  <view>
27    <button style="width: 237rpx;" class="{{phone ? 'auth':'no-auth'}} phone-wrapper" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
28    <text wx:if="{{!phone}}">未授权</text>
29    <text wx:else>已授权</text>
30</button> 
31  </view>
32</view>
33<button style="margin-top: 20rpx;" bindtap="submit" type="primary">保存</button>

SDK使用教程

进入页面先调用getUser()判断是否登陆过,登录过会通过这个接口去获取用户信息,获取之后进行信息回填;没有登陆过则不会进行信息回填。

  • 修改头像选择图片时,需要将头像的临时地址上传到memfire cloud的对象存储生成永久图片,再进行下载,在此之前需要去memfire cloud创建一个新的公开bucket。
1import { supabase } from '../../lib/supabase'
2// pages/me/index.ts
3Page({
4
5  /**
6   * 页面的初始数据
7   */
8  data: {
9    avatarUrl: null,
10    nikeName: null,
11    phone: null
12  },
13  //判断用户是否登录过,是否进行信息回填
14  async onLoad(){
15   const { data: { user } } = await supabase.auth.getUser()
16    if(user){
17      if(user.data.phone){
18        this.setData({phone:user.data.phone})
19      }
20      if(user.data.user_metadata){
21        this.setData({avatarUrl:user.data.user_metadata.arvatar,nikeName:user.data.user_metadata.nickname.value})
22      }
23    }
24  },
25  async submit() {
26    if (!this.data.nikeName || !this.data.avatarUrl) {
27      wx.showToast({
28        title: '请输入完整个人资料',
29        icon: "none",
30        duration: 2000
31      })
32      return;
33    }
34    const { data, error } = await supabase.auth.updateUser({ "data": { "nickname": this.data.nikeName, "arvatar": this.data.avatarUrl } })
35    if (error) {
36      wx.showToast({
37        title: error?.error || error?.msg,
38        icon: "none",
39        duration: 2000
40      })
41    } else if (data) {
42      wx.showToast({
43        title: "修改成功!",
44        icon: "none",
45        duration: 2000
46      })
47    }
48  },
49  async getPhoneNumber(e) {
50    const { data: { user }, error } = await supabase.auth.wechatBindPhone({
51      code: e.detail.code,
52    })
53    if (error) {
54      wx.showToast({
55        title: JSON.stringify(error) || error?.msg,
56        icon: "none",
57        duration: 2000
58      })
59    } else if (user) {
60      this.setData({
61        phone: user.data.phone
62      })
63    }
64  },
65  //选择头像,需要将头像的临时地址上传到memfire cloud的对象存储生成永久图片,再进行下载
66  //在此之前需要去memfire cloud创建一个新的bucket
67  async onChooseAvatar(e) {
68    let { avatarUrl } = e.detail
69    wx.getImageInfo({
70      src: avatarUrl, // 图片路径,必须是本地路径,可以相对路径或绝对路径
71      success: async function (res) {
72        const file = { fileType: "image", width:res.width,height:res.height, tempFilePath: avatarUrl }
73        const fileExt = avatarUrl.split('.').pop()
74        const fileName = `${Math.random()}.${fileExt}`
75        const filePath = `${fileName}`
76        let { error: uploadError } = await supabase.storage
77          .from('avatar')
78          .upload(filePath, file)
79        if (uploadError) {
80          throw uploadError
81        }
82        const { data } = await supabase
83          .storage
84          .from('avatar')
85          .getPublicUrl(filePath)
86          this.setData({ avatarUrl: data.publicUrl })
87      }
88  })
89})

css

1page{
2  font-size: 32rpx;
3}
4.section{
5  padding: 40rpx;
6  border-bottom: 1px solid gray;
7}
8.section:last-child{
9  border: none;
10}
11.section-title{
12  width: 20%;
13  float: left;
14}
15label{
16  padding: 0 20rpx;
17}
18.avatar{
19  width: 70rpx;
20  height: 70rpx;
21}
22.phone-wrapper{
23  width: 180rpx;
24}
25.no-auth{
26  background-color: #ccc;
27}
28.auth{
29  background-color: #07c160;
30  color: #fff;
31}

② 手机号授权登录#

使用手机号授权登录,用户初次进入小程序。 场景:

  • 需要拿到用户的手机号。
  • 小程序对应的web端是使用手机号登录注册的,小程序端不得不也需要使用手机号授权登录。

前提条件:

  • 只有企业账号才有权限进行手机授权登录
  • 在MemFire Cloud认证服务商页面启用微信小程序认证

微信认证

图例

微信认证 微信认证

html

1<button style="border-radius: 100rpx;margin-top: 300rpx;" type="primary"  open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">微信快速登录</button>

首先需要通过signInWithWechat接口来帮助用户进行注册,成功之后再使用wechatBindPhone将手机号绑定到用户信息中,这样就实现了手机号授权登录。

1import { supabase } from '../../lib/supabase'
2// pages/phone_login/index.ts
3Page({
4
5  /**
6   * 页面的初始数据
7   */
8  data: {
9
10  },
11
12  /**
13   * 生命周期函数--监听页面加载
14   */
15  onLoad() {
16
17  },
18
19  async getPhoneNumber(e: any) {
20    wx.login({
21      success: async res => {
22        const { data, error } = await supabase.auth.signInWithWechat({ code: res.code })
23        if(error){
24          wx.showToast({
25            title: JSON.stringify(error) || error?.msg,
26            icon: "none",
27            duration: 2000
28          })
29        }else if (data) {
30          const { data, error } = await supabase.auth.wechatBindPhone({
31            code: e.detail.code,
32          })
33          if (error) {
34            wx.showToast({
35              title: JSON.stringify(error) || error?.msg,
36              icon: "none",
37              duration: 2000
38            })
39          } else if (data) {
40            wx.showToast({
41              title: '登录成功!',
42              icon: "none",
43              duration: 1000
44            })
45          }
46        }
47      },
48    })
49  }
50})

更多api详情请参考资料