微信小程序登录认证
前言
为了顺应国内用户的使用习惯,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详情请参考资料