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

发布于:2023-07-04 ⋅ 阅读:(97) ⋅ 点赞:(0)

  授权微信小程序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
  
  });
  
  }
  
  });
本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到