Web

本文旨在介绍如何设置 Discord 身份验证，让您的网页可以使用 Player Network 登录鉴权服务通过 Discord 渠道登录。

注意

由于 Discord SDK 已停止维护拉起 Discord App 的授权方式，后续可能会对 Discord App 授权造成影响。为确保 Discord 授权稳定可用，推荐使用 WebView 进行网页授权，详见配置 DISCORD_LOGIN_USING_WEB。

前提条件

1. 在 Discord 开发者平台上配置应用

1. 创建 Discord 应用

创建 Discord 应用程序之前，请在 Discord 官方网站上注册一个账号，并根据提示完成账号认证（通过电子邮件）。

进入 Discord 开发者平台。
首次登录时，用户可能需要验证自己不是机器人。您可以在电子邮件验证后完成。
在 Applications 页面右上角，点击 New Application。
在弹出的应用程序创建窗口中，输入应用程序名称，然后点击 Create。
在 General Information 页面，查看 APPLICATION ID。
用户必须在 INTLConfig.ini 文件中配置 App ID。

2. 配置应用

进入 Discord Developer Platform。
在 Applications 页面，单击要配置的应用程序。
点击左侧导航栏中的 OAuth2，然后转到 OAuth2 > General。
在 Redirects 下配置下列 redirect URL，用于在 Discord 授权后接收回调，可点击 Add Another 增加单元格：
- https://common-web.intlgame.com/jssdk/discordlogincallback.html
- https://test-common-web.intlgame.com/jssdk/discordlogincallback.html

点击左侧导航栏中的 Rich Presence，进入 Rich Presence Art Assets 页面。
点击 Add Image(s)，配置应用程序的图片资源。
说明
应用程序中使用的所有图片资源都必须在此页面进行配置，包括好友邀请函的封面照片。

注意

更多关于其他第三方渠道接入 SDK 的信息，请参见 JavaScript SDK。

步骤1：引⼊ JavaScript SDK

警告

项目联调阶段可以引⼊ SDK 联调版本包，该包仅用于集成测试。项目上线须引⼊ SDK 正式版本包。

目前已支持 npm 包方式和 CDN 方式。

$ npm install @intlsdk/account-api

// SDK 联调版本包
<script src="https://test-common-web.intlgame.com/sdk-cdn/account-api/latest/index.umd.js"></script>
// SDK 正式版本包
<script src="https://common-web.intlgame.com/sdk-cdn/account-api/latest/index.umd.js"></script>

步骤2：使用 SDK

警告

在集成测试时，将 env 设置为测试环境；项目上线时，将 env 设置为相应的正式环境。

const accountApi = new IntlgameAccountApi({
  env: "test", // SDK environment 
  gameID: 11,
});

参数	类型	描述	备注
env	string	SDK 环境更多信息，请参见获取部署集群信息。	必填
gameID	number	Player Network 游戏唯一标识 ID	必填

步骤3：实现网页登录

实例化 accountApi 组件后，调用 thirdAuthorize 接口申请 Discord 渠道的访问令牌。

accountApi.thirdAuthorize({
    third_type: 'discord',
}).then(
(res) => {
    console.log(res);
});

当 Discord 返回访问令牌后，调用 intlAuthorize 接口获取 Player Network SDK OpenID 和令牌登录网站。

accountApi.intlAuthorize({
    third_type: 'discord',
    channel_info: {
        access_token: "EAAI2lTrXAZBwBAC"
        refresh_token: "EAAI2lTrXAZBwBAC"
        expires_in: "EAAI2lTrXAZBwBAC"
        redirect_uri: "EAAI2lTrXAZBwBAC"
    }
}).then(
(res) => {
    console.log(res);
});

调用 intlLogout 接口登出网站。

accountApi.intlLogout({
    token: '4567xsdfsd',
    openid: 'xxxxxxxx',
    channel_id: 26,
}).then(
(res) => {
    console.log(res);
});

前提条件​

步骤1：引⼊ JavaScript SDK​

步骤2：使用 SDK​

步骤3：实现网页登录​

前提条件

步骤1：引⼊ JavaScript SDK

步骤2：使用 SDK

步骤3：实现网页登录