300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 2000套微信微信小程序源码+抖音微信小程序源码附开源代码

2000套微信微信小程序源码+抖音微信小程序源码附开源代码

时间:2018-12-24 01:17:10

相关推荐

2000套微信微信小程序源码+抖音微信小程序源码附开源代码

授权微信小程序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-

指示

用户完成登录后,SDK会将用户的登录写入token微信的Storage,后续请求会自动携带token.

const { code } = await wx.login();// No user authorizationconst user = await authing.loginByCode(code); // Successfully logged in, write token to WeChat Storage// You can do this after logging inawait 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.detailconst 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.detailconst 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.detailconst 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@", "passw0rd");} catch (error) {console.log(error.code); // 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});}});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。