微信

微信三方登录接入一般也有两种场景

• 配置
  • 场景 1: 获取微信第三方登录的 accessToken
  • 场景 2: 获取微信三方登录的 fissionToken

配置

配置项	日常	预发	线上
fissionURL	https://daily-common-api.alibaba.net/api/tplogin/login/thirdparty	https://sapi-pre.aligames.com/api/tplogin/login/thirdparty	https://sapi.aligames.com/api/tplogin/login/thirdparty
host	daily-util-server.alibaba.net	pre-util-server.lingxigames.com	util-server.lingxigames.com

场景 1: 获取微信第三方登录的 accessToken

Step1. 初始化配置

初始化配置时需要根据当前联调环境接入对应环境的域名, 参考域名列表。

注意

上线时，配置都得使用线上

// lib.ts
import { ThirdParty } from '@ali-ieu/ieu-js-sdk'
const thirdParty = new ThirdParty({
    host: 'pre-util-server.lingxigames.com',
})

export { thirdParty }

Step2. 在视图层注册登录相关事件

一个可能的例子如下，在登录时显示已登录，未登录是展示登录按钮。

// unlogin.tsx
import { thirdParty } from 'path/to/lib.ts'

function Login() {
    /** 先判断是否登录 */
    const isLogined = thirdParty.isLogined('weixin')
    const handleLogin = () => {
        // 拉起微信三方登录
        thirdParty.weixinLogin({
            client_id: '替换成应用的client_id',
        })
    }
    return <div>{!isLogined ? <button onClick={handleLogin}>登录</button> : '已登录'}</div>
}

Step3. 获取三方 accessToken

注意

三方登录在初次一般会有一个页面跳转的过程，所以在三方网站登录成功时，回调回来的时候，应用重新加载了, 所以需要保证 getAccessToken 的调用是在应用初始化时，而不是在某个按钮的回调事件中。

// request.ts
// 网络请求处理模块
import { thirdParty } from 'path/to/lib'

try {
    const { accessToken } = await thirdParty.getAccessToken('weixin')
} catch (e) {
    console.error(e)
    // 一般无需处理，有特殊业务需求可根据 e.code 自行处理
}

场景 2: 获取微信三方登录的 fissionToken

和接入 accessToken类似，是另一种意义上的 accessToken。

Step1. 初始化配置

初始化配置时需要根据当前联调环境接入对应环境的域名, 参考域名列表。 需要传入 fissionURL

注意

上线时，配置都得使用线上

// lib.ts
import { ThirdParty } from '@ali-ieu/ieu-js-sdk'
const thirdParty = new ThirdParty({
    host: 'pre-util-server.lingxigames.com',
    fissionURL: 'https://daily-common-api.alibaba.net/api/tplogin/login/thirdparty',
})

export { thirdParty }

Step2. 在视图层注册登录相关事件

// unlogin.tsx
import { thirdParty } from 'path/to/lib.ts'

function Login() {
    const isLogined = thirdParty.isLogined('weixin', true)
    const handleLogin = () => {
        // 拉起微信三方登录
        thirdParty.weixinLogin({
            client_id: '替换成应用的client_id',
        })
    }
    return <div>{!isLogined ? <button onClick={handleLogin}>登录</button> : '已登录'}</div>
}

Step3. 获取 fission token

// request.ts
// 网络请求处理模块
import { thirdParty } from 'path/to/lib'

try {
    const { token } = await thirdParty.getFissionToken('weixin')
} catch (e) {
    // 一般无需处理，有特殊业务需求可根据 e.code 自行处理
}