企业微信第三方应用开发---登录流程（前端）

能来帮帮胡桃吗
2,042 阅读1分钟

前提条件

  • 已经配置应用的基本信息，以及对应的可信域名 如何创建第三方应用
  • 服务端开发人员已经配置好了数据回调URL，指令回调URL，具备获取第三方应用凭证suite_access_token的能力。
  • 将应用安装到测试企业的工作台

身份验证

主要有两种登录方式：

  • 企业微信客户端OAuth的授权登录
  • 企业微信管理端单点登录

OAuth的授权登录

流程图

构造授权链接

授权链接既可以由后端构造，返回给前端，也可以前端自己构造。但跳转至授权链接的行为需要由前端来触发。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

授权链接构造参考官方文档授权链接

实现流程

  • 用户在企业微信工作台点击应用，应用主页向授权链接进行跳转。

image.png

// 应用主页 wechat-index

created() {
    window.location.href = "授权链接"
}
  • 企业微信对授权链接校验后，向重定向URL跳转，并携带当前访问成员的code信息。
  • 在重定向URL对应的页面（单独准备一个页面），前端从路径上得到code，把code交给后端，换取用户信息和token，完成登录。
// 重定向URL对应的页面
// 假设重定向URL为https://demo.com/redirect
// 此时URL为：https://demo.com/redirect?code=xxx

created() {
    let code = this.$route.query.code
    // 拿到code后 调用后端的接口获取用户信息
}

前端需要做的主要就是： 1.在应用主页向授权链接跳转。 2.专门准备一个重定向URL对应的页面，待企业微信校验授权链接后跳转到该页面时，拿到code，调用后端的接口，将code给后端。后端通过code去和企业微信换取用户的信息，再返回给前端。

企业微信管理端单点登录

登录入口

image.png

流程图

image.png

实现流程

  • 管理员登录企业微信管理端，点击应用中的“业务设置”。会跳转到业务设置URL。业务设置URL上会携带auth_code。 image.png
  • 前端在业务设置URL对应的页面中拿到auth_code，把code交给后端，换取用户信息和token，完成登录。
// 业务设置URL对应的页面
// 此时URL为：https://demo.com/service?auth_code=xxx

created() {
    let auth_code = this.$route.query.auth_code
    // 拿到auth_code后 调用后端的接口获取用户信息
}
avatar
文章
阅读
粉丝