微信认证后端轻松搞定,MemFire Cloud 助力应用开发

2024-04-24 12:52

本文主要是介绍微信认证后端轻松搞定,MemFire Cloud 助力应用开发,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在当今移动互联网时代,微信认证已成为众多应用必不可少的身份验证方式。然而,对于开发者来说,微信认证的后端工作往往是一项繁琐且耗时的任务。MemFire Cloud提供了一套即用型解决方案,开发者可以轻松解决微信认证的后端难题,可以帮助开发者:

  • 免去服务器搭建和维护的麻烦
  • 简化微信认证流程,提供易于集成的 API 和 SDK
  • 确保安全性和合规性,符合微信开放平台的要求
  • 实现认证服务的自动扩展,满足不断增长的用户需求

通过使用 MemFire Cloud,开发者可以大大减少微信认证后端的工作量,并专注于应用的核心功能开发。这不仅可以缩短开发时间,还能降低开发成本,让开发者将精力投入到为用户创造价值的方面。

以下有两种方法实现微信认证。

① 微信用户授权登录

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

前提条件:

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

图例

   

首页代码示例:

html

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

SDK使用教程

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

// pages/main/index.ts
import { supabase } from '../../lib/supabase'
Page({data: {},login(){wx.login({success: async res => {const { data, error } = await supabase.auth.signInWithWechat({code:res.code})if(error){wx.showToast({title: error?.error || error?.msg,icon: "none",duration: 2000})}else if(data){setTimeout(() => {wx.showModal({title: '提示',content: '登录成功!去填充个人资料吧!',success (res) {if (res.confirm) {wx.switchTab({url:'/pages/me/index'})} else if (res.cancel) {}}})}, 1000);}},fail(err){wx.showToast({title: err.errMsg,icon: "none",duration: 2000})}})},})

个人中心页面

html

<view class="container"><view style="margin-bottom:20rpx">修改个人信息</view></view>
<!--昵称-->
<view class="section"><view class="section-title">昵称:</view><view><input type="text"  bindinput='getNickNameValue' name="getNickNameValue" value="{{nikeName}}" placeholder="请输入昵称"/></view>
</view>
<!--头像-->
<view class="section"><view class="section-title">头像:</view><view><button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"><text wx:if="{{!avatarUrl}}">点我获取头像</text><image wx:else class="avatar" src="{{avatarUrl}}"></image>
</button></view>
</view>
<view class="section"><view wx:if="{{phone}}" class="section-title">{{phone}}</view><view wx:else class="section-title">手机</view><view><button style="width: 237rpx;" class="{{phone ? 'auth':'no-auth'}} phone-wrapper" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"><text wx:if="{{!phone}}">未授权</text><text wx:else>已授权</text>
</button></view>
</view>
<button style="margin-top: 20rpx;" bindtap="submit" type="primary">保存</button>

SDK使用教程

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

  • 修改头像选择图片时,需要将头像的临时地址上传到MemFire Cloud的对象存储生成永久图片,再进行下载,在此之前需要去memfire cloud创建一个新的公开bucket。
import { supabase } from '../../lib/supabase'
// pages/me/index.ts
Page({/*** 页面的初始数据*/data: {avatarUrl: null,nikeName: null,phone: null},//判断用户是否登录过,是否进行信息回填async onLoad(){const { data: { user } } = await supabase.auth.getUser()if(user){if(user.data.phone){this.setData({phone:user.data.phone})}if(user.data.user_metadata){this.setData({avatarUrl:user.data.user_metadata.arvatar,nikeName:user.data.user_metadata.nickname.value})}}},async submit() {if (!this.data.nikeName || !this.data.avatarUrl) {wx.showToast({title: '请输入完整个人资料',icon: "none",duration: 2000})return;}const { data, error } = await supabase.auth.updateUser({ "data": { "nickname": this.data.nikeName, "arvatar": this.data.avatarUrl } })if (error) {wx.showToast({title: error?.error || error?.msg,icon: "none",duration: 2000})} else if (data) {wx.showToast({title: "修改成功!",icon: "none",duration: 2000})}},async getPhoneNumber(e) {const { data: { user }, error } = await supabase.auth.wechatBindPhone({code: e.detail.code,})if (error) {wx.showToast({title: JSON.stringify(error) || error?.msg,icon: "none",duration: 2000})} else if (user) {this.setData({phone: user.data.phone})}},//选择头像,需要将头像的临时地址上传到memfire cloud的对象存储生成永久图片,再进行下载//在此之前需要去memfire cloud创建一个新的bucketasync onChooseAvatar(e) {let { avatarUrl } = e.detailwx.getImageInfo({src: avatarUrl, // 图片路径,必须是本地路径,可以相对路径或绝对路径success: async function (res) {const file = { fileType: "image", width:res.width,height:res.height, tempFilePath: avatarUrl }const fileExt = avatarUrl.split('.').pop()const fileName = `${Math.random()}.${fileExt}`const filePath = `${fileName}`let { error: uploadError } = await supabase.storage.from('avatar').upload(filePath, file)if (uploadError) {throw uploadError}const { data } = await supabase.storage.from('avatar').getPublicUrl(filePath)this.setData({ avatarUrl: data.publicUrl })}})
})

css

page{font-size: 32rpx;
}
.section{padding: 40rpx;border-bottom: 1px solid gray;
}
.section:last-child{border: none;
}
.section-title{width: 20%;float: left;
}
label{padding: 0 20rpx;
}
.avatar{width: 70rpx;height: 70rpx;
}
.phone-wrapper{width: 180rpx;
}
.no-auth{background-color: #ccc;
}
.auth{background-color: #07c160;color: #fff;
}

② 手机号授权登录

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

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

前提条件:

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

图例

 

html

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

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

import { supabase } from '../../lib/supabase'
// pages/phone_login/index.ts
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad() {},async getPhoneNumber(e: any) {wx.login({success: async res => {const { data, error } = await supabase.auth.signInWithWechat({ code: res.code })if(error){wx.showToast({title: JSON.stringify(error) || error?.msg,icon: "none",duration: 2000})}else if (data) {const { data, error } = await supabase.auth.wechatBindPhone({code: e.detail.code,})if (error) {wx.showToast({title: JSON.stringify(error) || error?.msg,icon: "none",duration: 2000})} else if (data) {wx.showToast({title: '登录成功!',icon: "none",duration: 1000})}}},})}
})

这篇关于微信认证后端轻松搞定,MemFire Cloud 助力应用开发的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/931817

相关文章

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级(QoS0/1/2),以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端(Clien

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

SpringBoot开发中十大常见陷阱深度解析与避坑指南

《SpringBoot开发中十大常见陷阱深度解析与避坑指南》在SpringBoot的开发过程中,即使是经验丰富的开发者也难免会遇到各种棘手的问题,本文将针对SpringBoot开发中十大常见的“坑... 目录引言一、配置总出错?是不是同时用了.properties和.yml?二、换个位置配置就失效?搞清楚加

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》:本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF

基于Python开发Windows屏幕控制工具

《基于Python开发Windows屏幕控制工具》在数字化办公时代,屏幕管理已成为提升工作效率和保护眼睛健康的重要环节,本文将分享一个基于Python和PySide6开发的Windows屏幕控制工具,... 目录概述功能亮点界面展示实现步骤详解1. 环境准备2. 亮度控制模块3. 息屏功能实现4. 息屏时间

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布局和层叠关

SpringBoot3应用中集成和使用Spring Retry的实践记录

《SpringBoot3应用中集成和使用SpringRetry的实践记录》SpringRetry为SpringBoot3提供重试机制,支持注解和编程式两种方式,可配置重试策略与监听器,适用于临时性故... 目录1. 简介2. 环境准备3. 使用方式3.1 注解方式 基础使用自定义重试策略失败恢复机制注意事项

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,:本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部