前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Web 端微信扫码登录

Web 端微信扫码登录

原创
作者头像
RQrry
发布2022-12-01 11:35:24
3.3K0
发布2022-12-01 11:35:24
举报
文章被收录于专栏:ruiqiu的code

日常使用网站经常会遇到微信扫码登录的场景,这里主要介绍两种 web 端微信扫码登录的方式及主要流程

1. 微信开放平台 —— 网站应用微信登录

接入微信开放平台——网站应用开发实现微信扫码登录

基于 OAuth2.0 协议标准构建的微信 OAuth2.0 授权登录系统。

1.1 前期准备

  1. 微信开放平台注册开发者账号
  2. 网站已上线,用于在微信开放平台申请网站应用
  3. 拥有一个审核通过的网站应用,获取 AppID 和 AppSercret
    审核接入流程
    审核接入流程
  4. 申请微信登录且审核通过

1.2 授权流程

  1. 第三方发起微信授权登录请求,微信用户允许授权第三方应用后,微信会拉起应用或重定向到第三方网站,并且带上授权临时票据 code 参数;
  2. 通过 code 参数加上 AppID 和AppSecret等,通过 API 换取access_token;
  3. 通过 access_token 进行接口调用,获取用户基本数据资源或帮助用户实现基本操作。
授权登录时序图
授权登录时序图

参考文档:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

1.3 官网案例

易迅网通过接入网站应用开发,为用户提供了微信登录功能,降低了注册门槛,并可在用户授权后,获取用户基本信息,包括头像、昵称、性别、地区。出于安全考虑,网站应用的微信登录,需通过微信扫描二维码来实现。

官网案例
官网案例

2. 小程序扫码登录

2.1 前期准备

已发布上线的小程序(获取小程序码接口只能生成已发布的小程序的二维码)

2.2 登录流程

登录流程
登录流程

2.2.1 生成小程序二维码

开放能力-获取小程序二维码:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html

ps: 接口只能生成已发布的小程序的二维码

根据场景推荐选择: 接口 B:适用于需要的码数量极多的业务场景

  • 生成小程序码,可接受页面参数较短,生成个数不受限。

2.2.2 小程序登录

小程序登录(官方能力

小程序登录
小程序登录

2.2.3 获取授权状态

可结合业务场景选择合适的方式获取用户授权状态:

  • websocket
  • 定时轮询

2.3 案例

广东政务服务网微信扫码登录登录案例

广东政务服务网微信扫码登录登录
广东政务服务网微信扫码登录登录

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 微信开放平台 —— 网站应用微信登录
    • 1.1 前期准备
      • 1.2 授权流程
        • 1.3 官网案例
        • 2. 小程序扫码登录
          • 2.1 前期准备
            • 2.2 登录流程
              • 2.2.1 生成小程序二维码
              • 2.2.2 小程序登录
              • 2.2.3 获取授权状态
            • 2.3 案例
            相关产品与服务
            云开发 CloudBase
            云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
            领券
            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档