uniapp打包App实现微信授权登录(详解)

1.前言

开发中我们常常遇到,微信,QQ等第三方登录在App上进行授权登录,便于用户快速登录,今天将详细讲解app实现微信授权的登录流程,话不多说~~

2.真机调试与打包

1. 手机配置

手机打开开发者模式,基本就是打开手机设置—> 关于手机—>软件版本或版本号—>点击5到6次直到出现如下图即可:

uniapp打包App实现微信授权登录(详解)

同时手机需要开启USB调试,找到系统更新—>开发人员选项—>开启USB调试

uniapp打包App实现微信授权登录(详解)

数据线连接电脑和手机,在弹出页面中选择文件传输

uniapp打包App实现微信授权登录(详解)

2. 打包

一切准备就绪打开HBuilder X运行项目:

uniapp打包App实现微信授权登录(详解)

这里就不在开发调试了,为了避免每一次调试都进行打包,会造成时间与资源的浪费,我们直接打包自定义基座

uniapp打包App实现微信授权登录(详解)

详细见官方文档

3. 生成签名

详见官方文档

打开下载的软件

uniapp打包App实现微信授权登录(详解)

3.微信授权

1. 授权基础配置

声明:实现微信授权需要 app应用包名 app应用签名 appid

uniapp打包App实现微信授权登录(详解)

完成上图的后台配置。

打开HBuilder X,打开manifest.json进行配置

uniapp打包App实现微信授权登录(详解)

2. 代码实现

这里使用H5+plus实现App的微信授权

export const wxloginHook = () => {
  return new Promise((resolve, reject) => {
    plus.oauth.getServices((services) => {
      if (services && services.length) {
        services.forEach((item) => {
          if (item.id === "weixin") {
            item.authorize((event) => {
              // event.code传递给后台获取token,请求用户信息
              resolve(event)
            }, (fail) => {
              reject(fail)
              Toast('none', '取消授权')
            }, {
              scope: "snsapi_userinfo",
              state: "authorize",
              // 后台配置的appid
              appid: "",
            });
          } else {
            Toast('none', '当前环境不支持微信授权')
          }
        })
      }



    }, (fail) => {
      Toast('none', '无微信授权服务')
      reject(fail)
    })
  })
}

详细见官方文档

最后运行代码弹出授权页面点击同意授权获取code

uniapp打包App实现微信授权登录(详解)

4.写在最后

APP端的微信登录使用的是h5+的api,个人也是查阅相关文档,实现了微信授权登录,没涉及技术难点,仅供刚刚接触到授权业务的翻阅,如有不对欢迎指出uniapp打包App实现微信授权登录(详解)

原文链接:https://juejin.cn/post/7344173123388522533 作者:the局外人

(0)
上一篇 2024年3月11日 下午4:27
下一篇 2024年3月12日 上午10:00

相关推荐

发表回复

登录后才能评论