# 接入社会化登录

社会化登录指使用微信、Github 等互联网服务登录自己的服务，Authing 目前支持 Github 登录和微信 PC 网页版扫码登录。

{% hint style="info" %}
本章节将以接入 Github 为例，演示如何使用 Authing 快速接入社会化登录，其他社会化登录同理。
{% endhint %}

线上演示：

{% embed url="<https://sample.authing.cn/#/>" %}

## 创建 Github OAuth 应用

请点击下面这个卡片，按照官方的说明流程创建一个 Github OAuth 应用：

{% embed url="<https://developer.github.com/apps/building-oauth-apps/creating-an-oauth-app/>" %}

{% hint style="info" %}
**重要提示，在创建 Github OAuth 应用时填写的 Callback URI 请填写为：**

<https://oauth.authing.cn/oauth/github/redirect>

如下图所示：

![](/files/-Lf52RmaRUJy3B10vgzW)
{% endhint %}

## 在 Authing 控制台配置 Github OAuth 信息

在 Github 创建完 OAuth 应用后请按照下图所示在 Authing 控制台中配置 Github OAuth 信息：

![](/files/-Lf07eF5DUGku4q3npOY)

打开开关后将弹出如下信息框：

![](/files/-Lf07kTK1Lcujfd9w9AS)

相关参数解释如下：

| Client ID                         | Client Secret                          | Redirect              |
| --------------------------------- | -------------------------------------- | --------------------- |
| 在 OAuth 平台上申请的 APP ID 或 Client ID | OAuth 平台提供的 Client Secret 或 App Secret | 成功或失败后的回调 URL（你的业务地址） |

![](/files/-Lf53oxzJTbrIAbdlXdL)

配置完成后请点击「确定」保存信息。

接下来，你可以通过拼接以下 URL 执行 OAuth 登录流程：

[https://github.com/login/oauth/authorize/?client\_id=\<Github\_Client\_ID>\&state=\<Authing\_Client\_ID>](<https://github.com/login/oauth/authorize/?client_id=\<Github_Client_ID\>\&state=\<Authing_ClientId\>&#xA;>)

如 Authing 的官方「使用 Github 登录」链接：

<https://github.com/login/oauth/authorize/?client_id=5446d8d6083f27fed5b4&state=59f86b4832eb28071bdd9214>

{% hint style="info" %}
你可以在 Web 页面上放置一个可点击的按钮或 Logo 链接到上面的链接以便用户可以点击登录。
{% endhint %}

## 获取用户数据

用户在访问上面拼接好的链接后，将回调至开发者配置好的 Redirect URL，并附带以下参数：

| 参数        | 说明                                                                                                                 |
| --------- | ------------------------------------------------------------------------------------------------------------------ |
| code      | 错误或成功代码，200 为成功，非 200 为失败                                                                                          |
| message   | 成功或错误信息                                                                                                            |
| data      | userInfo，若 code 为非 200 不返回此参数                                                                                      |
| bindOAuth | 是否是登录操作， 无此参数或此参数为`0`则为登录, 此参数为`1`则为绑定账号操作, 此时可使用`data`参数中的数据[绑定OAuth](https://docs.authing.cn/#/oauth/bind_oauth) |

以下是使用 JavaScript 从 URL 参数中获取用户数据的代码：

```javascript
// 获取 URL 参数
function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var r = window.location.search.substr(1).match(reg);
    if (r != null) {
        return unescape(r[2]);
    }
    return null;
}

// 将 Code 转为 Int 类型，方便判断
const code = parseInt(getQueryString('code'));

if(code !== 200) {
  // 出错了
  const errorMsg = getQueryString('message');
  // 展示 errorMsg 给用户或执行其他业务 ...
  
}else {
  const userInfo = getQueryString('data');
  
  // 将 token 存储到 localStorage 
  // 建议在之后的请求中附带 Token，并由后端验证 Token 合法性
  localStorage.setItem('token', userInfo.token);
}
```

{% hint style="info" %}
取得用户数据后，若你想验证 Token 合法性，请参考：[验证 Token 合法性](https://learn.authing.cn/authing/advanced/authentication/verify-jwt-token)。
{% endhint %}

### userInfo 示例

```javascript
{
    "_id": "5b88aaea349e2d0001a5b718",
    "email": "test@test.com",
    "emailVerified": false,
    "unionid": "123456",
    "oauth": "{\"login\":\"123456\",\"id\":123456,\"node_id\":\"MDQ6VXNlcjI0Njk2ODg=\",\"avatar_url\":\"https://avatars3.githubusercontent.com/u/2469688?v=4\",\"gravatar_id\":\"\",\"url\":\"https://api.github.com/users/test\",\"html_url\":\"https://github.com/test\",\"followers_url\":\"https://api.github.com/users/test/followers\",\"following_url\":\"https://api.github.com/users/test/following{/other_user}\",\"gists_url\":\"https://api.github.com/users/test/gists{/gist_id}\",\"starred_url\":\"https://api.github.com/users/test/starred{/owner}{/repo}\",\"subscriptions_url\":\"https://api.github.com/users/test/subscriptions\",\"organizations_url\":\"https://api.github.com/users/test/orgs\",\"repos_url\":\"https://api.github.com/users/test/repos\",\"events_url\":\"https://api.github.com/users/test/events{/privacy}\",\"received_events_url\":\"https://api.github.com/users/test/received_events\",\"type\":\"User\",\"site_admin\":false,\"name\":\"test\",\"company\":\"test\",\"blog\":\"http://test.com\",\"location\":\"Beijing, China\",\"email\":\"test@test.com\",\"hireable\":null,\"bio\":\"Being NO.1\",\"public_repos\":91,\"public_gists\":0,\"followers\":109,\"following\":27,\"created_at\":\"2012-10-02T06:38:50Z\",\"updated_at\":\"2018-07-23T05:51:23Z\"}",
    "registerMethod": "oauth:github",
    "username": "test",
    "nickname": "",
    "company": "",
    "photo": "https://avatars3.githubusercontent.com/u/2469688?v=4",
    "browser": "",
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7ImVtYWlsIjoieGlleWFuZ0Bkb2RvcmEuY24iLCJ1bmlvbmlkIjoiMjQ2OTY4OCIsImlkIjoiNWI4OGFhZWEzNDllMmQwMDAxYTViNzE4IiwiY2xpZW50SWQiOiI1YTlmYTI2Y2Y4NjM1YTAwMDE4NTUyOGMifSwiaWF0IjoxNTU4MTAwMDczLCJleHAiOjE1NTkzOTYwNzN9.7R_-CGnbPBRjHFaVS0ERWMaGfR_24zYJiBTJvJ4XYxk",
    "tokenExpiredAt": "Sat Jun 01 2019 21:34:33 GMT+0800 (CST)",
    "loginsCount": 47,
    "lastLogin": "Fri May 17 2019 21:34:33 GMT+0800 (CST)",
    "lastIP": "52.231.14.216",
    "signedUp": "Fri Aug 31 2018 10:41:46 GMT+0800 (CST)",
    "blocked": false,
    "isDeleted": false
}
```

## 完成接入

恭喜你，此时已经完成了 Github OAuth 登录。

## Authing 支持的社会化登录

下表列举了 Authing 支持的社会化登录及其配置信息。

| 社会化登录名称   | Callback URL                                       | 注册地址                                                                                                   |
| --------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
| 微信 PC 网页版 | <https://oauth.authing.cn/oauth/wechat/redirect>   | [微信开放平台](https://open.weixin.qq.com/cgi-bin/index?t=home/index\&lang=zh_CN)                            |
| Github    | <https://oauth.authing.cn/oauth/github/redirect>   | [Creating a github APP](https://developer.github.com/apps/building-github-apps/creating-a-github-app/) |
| QQ        | <https://oauth.authing.cn/oauth/qq/redirect>       | [QQ 互联](https://connect.qq.com/manage.html#/)                                                          |
| 新浪微博      | <https://oauth.authing.cn/oauth/weibo/redirect>    | [新浪微博开放平台](https://open.weibo.com/developers)                                                          |
| 钉钉        | <https://oauth.authing.cn/oauth/dingtalk/redirect> | [钉钉开发者平台](https://open-dev.dingtalk.com/#/loginMan)                                                    |

Callback URL 指在创建微信 OAuth 应用、Github OAuth 等应用时在其平台中填写的 Redirect URL （有的平台可能是 Callback URL）。

以 Github 为例，在创建 Github OAuth 应用时，创建表单中的 Callback URL 应该填写为：

| <https://oauth.authing.cn/oauth/github/redirect> |
| ------------------------------------------------ |

![](/files/-Lf52RmaRUJy3B10vgzW)

而在 Authing 控制台中配置的 Redirect URL 配置为你自己的业务地址：

![](/files/-Lf53j8OpuqE7Uudcn1q)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://authing.gitbook.io/authing/master/advanced/social-login.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.