授权微信小程序SDK(authing-wxapp-sdk)适用于微信微信小程序(打开新窗口)基于微信微信小程序环境。可以使用微信微信小程序源码中的所有方法,比如Get,修改用户信息,添加用户自定义字段等等。专门用于微信小程序环境通过微信获取用户手机号、使用微信授权登录、微信授权手机号登录的方法。
配置微信小程序登录
演示:y.wxlbyx.icu
在小程序中使用Authing小程序SDK需要在微信开放平台申请微信小程序 (打开新窗口),同时Authing控制台 (打开新窗口)填写微信小程序的配置。
微信小程序源码安装
小程序基础库2.2.1及以上版本,开发者工具1.02.1808300及以上版本,小程序支持使用npm安装第三方包, 微信打开文档 (打开新窗口)。
安装 npm
使用 npm:
npm install authing-wxapp-sdk
使用纱线:
yarn add authing-wxapp-sdk
内置微信小程序开发工具npm
在开发者工具中点击菜单栏:Tool --> build npm:
初始化
AuthenticationClient初始化需要传递AppId(Applications ID):
你可以在控制台的Application中查看自己的应用列表。
const { AuthenticationClient } = require("authing-wxapp-sdk");
const authing = new AuthenticationClient({
appId: "AUTHING_APP_ID"
});
完整参数列表如下:
appId: 授权应用ID(必填);
accessToken:通过用户token初始化SDK(可选,可以在前端localStorage中缓存用户token,记住登录的目的)。
timeout:请求超时时间,单位毫秒,默认为10000(10秒)。
onError: 错误处理程序,您可以使用它全局捕获 Authing 客户端请求的所有异常。该函数定义为:
(code: number, message: string, data: any) => void
完整的错误代码请看这个文档。
host:授权可选,云用户忽略。对于私人用户,需要采用这种格式:https://authing-api.mydomain.com
指示
用户完成登录后,SDK会将用户的登录写入token微信的Storage,后续请求会自动携带token.
const { code } = await wx.login();
// No user authorization
const user = await authing.loginByCode(code); // Successfully logged in, write token to WeChat Storage
// You can do this after logging in
await authing.updateProfile((nickname: "Bob"));
后续用户打开微信小程序,如果微信小程序的Storage中保存了用户的token,访问Authing请求会自动带上token。
// This request can be successful because the user is out of the login state.
await authing.updateProfile((nickname: "Mick"));
API参考
您可以使用authing-js-sdk AuthenticationClient中间的所有方法,调用方法和authing-js-sdk完美匹配。
登录密码
使用微信授权登录。
如果用户在微信小程序中登录,并且用户没有使用微信微信小程序登录同一个主体绑定同一个主体,则会创建一个新账号。
如果用户在微信小程序中登录微信小程序,用户使用微信app登录同一个body绑定同一个body,会返回对应的微信账号。
范围
code:调用 wx.login() (打开新窗口)获取code,无需用户授权。必需的。
options: 选修的。
options.iv:open-type是getUserInfo 微信按钮组件 (打开新窗口)点击事件返回iv。iv并且encryptedData必须同时通过,Authing Server 会尝试iv和encryptedDataSino-Adding User Information。第一次需要手动授权。选修的。
options.encryptedData:open-type是getUserInfo 微信按钮组件 (打开新窗口)点击事件返回encryptedData。iv并且encryptedData必须同时通过,Authing Server 会尝试iv和encryptedDataSino-Adding User Information。第一次需要手动授权。选修的。
options.rawData:open-type是getUserInfo 微信按钮组件 (打开新窗口)点击事件返回rawData。和iv+encryptedData两个选择,如果你通过rawData,Authing Server 将直接使用这个数据作为用户配置文件。第一次需要手动授权。选修的。
例子
静默授权
用户注册用户个人资料中的Nickname,Avatar会因为没有获取到用户的头像和昵称而为空。
const { code } = await wx.login();
const data = await authing.loginByCode(code);
用户手动授权获取昵称头像
只有第一次需要授权,可以直接使用wx.getUserInfo直接获取头像昵称。
首先请求用户手动授权
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">
Get an avatar nickname
</button>
getUserInfo: async function (e) {
const { code } = await wx.login()
const { rawData } = e.detail
const user = await authing.loginByCode(code, { rawData })
// or pass in iv encryptedData
// const { iv, encryptedData } = e.detail
// const user = await authing.loginByCode(code, { iv, encryptedData })
console.log(user)
}
然后可以自动获得wx.getUserInfo
const { rawData } = await wx.getUserInfo();
const user = await authing.loginByCode(code, { rawData });
// or iv encryptedData
// const { iv, encryptedData } = e.detail
// const user = await authing.loginByCode(code, { iv, encryptedData })
电话登录
通过微信手机号登录。每次调用都需要手动授权。
如果手机号是第一次注册,手机号绑定微信账号(不存在)。
如果注册了手机号,则返回手机号对应的账号,手机号与当前微信账号绑定。
范围
code: 调用wx.login() (打开新窗口)得到code。不需要用户授权。必需的。
iv:open-type是getPhoneNumber 微信按钮组件 (打开新窗口)单击iv。必需的。
encryptedData:open-type是getPhoneNumber 微信按钮组件 (打开新窗口)单击encryptedData。必需的。
例子
<button open-type="getPhoneNumber" bindgetphonenumber="getPhone">
Get your phone number
</button>
getPhone: async function(e) {
const { code } = await wx.login()
const { iv, encryptedData } = e.detail
const data = await authing.loginByPhone(code, iv, encryptedData)
console.log(data)
}
获取电话
获取当前用户的手机号(不会用手机号注册或绑定账号)
范围
code:调用 wx.login() (打开新窗口)获取code,无需用户授权。必需的。
iv:open-type是getPhoneNumber 微信按钮组件 (打开新窗口)点击事件返回iv。必需的。
encryptedData:open-type是getPhoneNumber微信按钮组件 (打开新窗口)点击事件返回encryptedData。必需的。
例子
<button open-type="getPhoneNumber" bindgetphonenumber="getPhone">
Get your phone number
</button>
getPhone: async function(e) {
const { code } = await wx.login()
const { iv, encryptedData } = e.detail
const data = await authing.getPhone(code, iv, encryptedData)
console.log(data)
}
返回数据示例:
{
"countryCode": "86",
"phoneNumber": "188xxxx8888",
"purePhoneNumber": "188xxxx8888",
"openid": "o1p9H4wAgb9uTqpxG5Z1g0pIr3FE",
"unionid": "o0pqE6Fbr5M-exSu_PeL_sjwN44U"
}
更新头像
更新用户头像,方法自动调用wx.chooseImageAuthing的获取图片和上传CDN,只需一行代码调用。
例子
const { photo } = await authing.updateAvatar();
console.log(photo);
最佳实践
建议用户初次使用微信小程序,使用loginByCode获取微信小程序账号对应的Authing账号,如果账号绑定手机号,则无需请求用户授权又是手机。否,如果账号没有绑定手机号,则调用该loginByPhone方法请求用户对手机号进行授权。
用户登录后,authing-wxapp-sdk可以调用token,可以调用authing.checkLoginStatus()判断用户的token是否有效,当token失效后再次登录。
错误处理
您可以使用try catch
try {
const user = await authing.loginByEmail("test@example.com", "passw0rd");
} catch (error) {
console.log(error.code); // 2004
console.log(error.message); // User does not exist
}
完整的错误代码,请看文档。
也可以指定onError统一捕获所有Authing请求的异常,比如微信组件使用wx.showModal.
const authing = new AuthenticationClient({
userPoolId,
onError: (code, message) => {
wx.showModal({
content: message,
showCancel: false
});
}
});