10/28/2024 17:13:23
MSDK-Web 接入指引
一、能力简介
- 适用于需要在端外实现 MSDK 登录的场景，比如 H5（包括 PC 网页）活动，官网页面；
- 目前支持的登录渠道包括：Facebook，Google，Apple，Twitter，Wechat，邮箱/手机号，更多的渠道正在持续实现；
二、接入准备
业务侧提供 MSDK Game ID 以及需要接入的渠道的 Client ID (有的渠道也叫作 App ID），示例如下：
MSDK Game ID: 11 (一般业务的 game id 都是 5 位整数，比如 12345) 各渠道 Client ID: wechat: wx49174c26790800f1 facebook: 371085970095922 google: 851769810464-ed9kaaikttfvp7f2kd8qmilogg8us71t.apps.googleusercontent.com apple: com.itop.sdk.web 邮箱/手机: 0afef39eb02d069107db6e02efd71a2c twitter: M3ZzRUVncEhKbVJkZ3JjWXg5ZW86MTpjaQ- 这里除了 Apple，其它渠道的 Client ID 也可以从飞鹰上获取；
- Apple Web 登录是单独的 ID，需要额外新增（一般是找O2000助手处理）
MSDK Web 登录需要一个统一中转页面，目前的策略是平台为每个业务分配独立的中转页面域名，域名格式为
msdk-{业务缩写}.vasdgame.com，比如业务缩写为abcd，中转域名就是msdk-abcd.vasdgame.com。- 所以这里需要业务侧提供一个缩写，用于域名部分，一般建议4个字母左右的长度
- 需要将中转页面加入到各个渠道的回调白名单，需要添加的回调地址如下：
- Facebook:
- Google:
- Apple:
- Twitter (X):
- Wechat:
- 微信的比较特殊，需要添加域名，而且只能添加一个，所以直接添加 msdk-
{业务缩写}.vasdgame.com 即可。
- 微信的比较特殊，需要添加域名，而且只能添加一个，所以直接添加 msdk-
三、平台接入
- 平台这边会基于上述提供的信息进行配置和部署，部署成功之后会提供 SDK。
四、SDK使用方式
支持传统的HTML + JS的方式，也支持通过npm包引入，但鉴于目前H5活动开发场景都是传统方式，所以这里只提供这种方式的使用样例，如果需要 npm 包，可联系 devoszhang 获取。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MSDK Web Sample</title>
<!--
测试：https://msdk-{业务缩写}.vasdgame.com/msdk-test/sdk/index.js
正式：https://msdk-{业务缩写}.vasdgame.com/msdk/sdk/index.js
-->
<script src="https://msdk-{业务缩写}.vasdgame.com/msdk-test/sdk/index.js"></script>
</head>
<body>
<h1>MSDK Web Sample</h1>
<div style="display: flex; flex-direction: column;">
<div>渠道登录</div>
<button id="btn-facebook">Facebook</button>
<button id="btn-google">Google</button>
<button id="btn-apple">Apple</button>
</div>
<script>
(() => {
const login = new MSDK.MSDK({
gameId: 12345,
});
function getFieldValue(field) {
/**
* @type {HTMLInputElement}
*/
const ele = document.getElementById(field);
return ele.value;
}
// 这个函数由业务自己实现，比如只是简单的检测cookie，或者更严格的请求后端接口验证
// 这里作为示例简化问题，将登录态存到了localStorage
function setLoginSecret(secret) {
localStorage.setItem('MSDK_SECRET', secret);
}
document.getElementById('btn-facebook').addEventListener('click', () => {
login.auth({
channelId: 4, // 4: FB, 6: Google, 15: Apple
// redirectUri: encodeURIComponent(location.href), // 登录成功之后会跳转回到这个URL，授权码（code）会附加到上面，默认为location.href
state: JSON.stringify({xyz: '12345'}), // 这里可以是任意内容，跳转回来之后还能获取到
});
});
document.getElementById('btn-google').addEventListener('click', () => {
login.auth({
channelId: 6, // 4: FB, 6: Google, 15: Apple
// redirectUri: encodeURIComponent(location.href), // 登录成功之后会跳转回到这个URL，授权码（code）会附加到上面，默认为location.href
});
});
document.getElementById('btn-apple').addEventListener('click', () => {
login.auth({
channelId: 15, // 4: FB, 6: Google, 15: Apple
// redirectUri: encodeURIComponent(location.href), // 登录成功之后会跳转回到这个URL，授权码（code）会附加到上面，默认为location.href
});
});
/**
* @type {{code?: string; state?: string} | undefined}
*/
const authRes = login.getAuthResult();
if (authRes?.code) {
/**===============================================================================================
这里由两种选择:
+ 第一种是将code发送到后端，后端调用如下接口来校验code有效性并获取用户信息：
+ 测试环境：curl "https://publicfaas.vasdgame.com/hw/backendapi/?namespace=Faas&fn=MSDKToken&env=olsb&pdr_appid=2954&s=pandora&fnport=46104&fndst=devserver1&ppolaris=faas-inner-hok-sg.faas-inner-hok-sg.gdpsgrelease.envolve.com" -d '{"data": {"code": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "gameId": 12345}}' -H'Content-Type: application/json' -H'X-Pandora-Env:OLSB'
+ 正式环境：curl "https://publicfaas.vasdgame.com/hw/backendapi/?namespace=Faas&fn=MSDKToken&env=prod&pdr_appid=2954&s=pandora&fnport=46104&fndst=devserver1&ppolaris=faas-inner-hok-sg.faas-inner-hok-sg.gdpsgrelease.envolve.com" -d '{"data": {"code": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", "gameId": 12345}}' -H'Content-Type: application/json' -H'X-Pandora-Env:PROD'
> 注意，code是一次性的，只有3分钟有效期
+ 第二种是直接在前端JS中调用login.accessToken来获取，这种情况下因为是前端换取，所以在真正需要校验身份的时候需要在后台调用MSDK的token校验接口
这里为了简化，直接把code作为secret，正式使用时候，请勿如此！！！
================================================================================================**/
setLoginSecret(authRes.code);
location.hash = 'logined';
}
})();
</script>
</body>
</html>
Copyright © 2024 MSDK.
All rights reserved.
All rights reserved.