企业微信自建H5应用流程及身份认证-前端

开发流程

1. 创建应用

超级管理员登录 企业微信管理后台 在 应用管理 界面，选择 应用 ，并在 自建 中点击 创建应用。

在弹出框填写应用的图标、标题、描述和可见范围基本信息。

获取应用的 AgentID 与 Secret

在自建应用的首页，复制出 AgentID。

并且点击 Secret > 查看，将当前应用的 Secret 发送到企业微信中。

2. 配置应用主页

登录管理后台，在应用详情页面，点击 应用主页，选中 网页，设置工作台应用主页。

登录管理后台，在应用详情页面，开发者接口 > 网页授权及JS-SDK，点击 设置可信域名，在输入框填入该应用的线上域名。

身份认证

• 企业微信OAuth2接入流程

• 关于网页授权的可信域名

REDIRECT_URL中的域名，需要先配置至应用的“可信域名”，否则跳转时会提示“redirect_uri参数错误”。

• 构造网页授权链接

如果企业需要在打开的网页里面携带用户的身份信息，第一步需要构造如下的链接来获取code

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

1. Template

<el-button v-if="!code" class="btn" @click="login()" type="primary">授权登录</el-button>

2. created

// 获取重定向后的code
const code = this.getQueryVariable("code")
this.code = code
if (this.code) {
    // 登录
    this.$api.login(config.agentid, this.code).then(res=>{
        // 清除code
        this.code = ''
        // 存储token和姓名
        this.setToken('Bearer ' + res.token)
        this.setUsername(res.username)
        // 跳转至首页
        this.$router.replace({path:'/'})
    })
}

3. methods

login() {
    window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${config.corpid}&redirect_uri=${config.callbackUrl}&response_type=code&scope=snsapi_base#wechat_redirect`
}

getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
         var pair = vars[i].split("=");
         if (pair[0] == variable) {
             return pair[1];
         }
    }
}