第三方登录是指用户在不同的应用或网站中使用同一组凭证（通常是用户名和密码）进行登录的行为。这种方式的优点是可以方便用户，在不同网站间不用记住不同的用户名和密码，同时也可以给用户提供更方便的界面和使用体验。这里我将介绍一种基于OAuth协议的第三方登陆流程开发。
OAuth是一种基于授权的开放标准，它允许用户授权第三方应用访问自己的资源（如照片、联系人等）时，通过标准化的流程获得访问授权，而无需向第三方应用共享自己的凭证信息。下面是OAuth的工作流程：
1. 用户使用第三方应用登录。
2. 第三方应用向用户请求授权。
3. 用户同意授权。
4. 第三方应用向授权服务器请求token。
5. 授权服务器颁发token。
6. 第三方应用使用token请求数据。
7. 数据服务器返回数据。
8. 第三方应用使用数据。
现在我们将OAuth流程应用在第三方登录中，将第三方应用作为客户端（利用第三方网站的接口）。
1. 用户使用第三方应用进行登录，例如使用Facebook登录。
2. 第三方应用向用户请求授权，用户同意后，第三方应用向Facebook请求token。
3. Facebook颁发token。
4. 第三方应用使用token请求用户的信息。
5. Facebook返回用户信息。
6. 第三方应用使用用户信息完成登录流程。
下面是更详细的流程：
1. 在第三方应用中，引入Facebook开发平台提供的SDK，如下所示：
```
```
2. 初始化SDK：
```
FB.init({
appId : '你的应用ID',
cookie : true,
xfbml : true,
version : 'v11.0',
status : true
});
```
这个信息可以在Facebook开发平台中创建应用后获取。`status`属性表示是否在初始化过程中检查用户登录状态。`true`表示在初始化完成之后立即调用`FB.getLoginStatus()`方法检查用户状态。
3. 在页面中添加Facebook登录按钮：
```
```
`fb:login-button`是一个Facebook提供的自定义标签，当用户点击按钮时，会弹出Facebook的登录窗口。`scope`属性指定要请求的权限，如public_profile表示用户名等公开信息；email表示用户邮箱。`onlogin`属性指定要执行的JavaScript函数，用于处理用户登录后的操作。
4. 实现`checkLoginState`方法：
```
function checkLoginState() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// 已登录
getUserInfo();
} else {
// 未登录
}
});
}
```
这个方法调用`FB.getLoginStatus`检查用户登录状态。如果已登录，调用`getUserInfo`方法获取用户信息；如果未登录，不进行任何操作。
5. 实现`getUserInfo`方法：
```
function getUserInfo() {
FB.api('/me', {fields: 'name, picture, email'}, function(response) {
// 处理用户信息
});
}
```
这个方法调用`FB.api`获取用户信息。`/me`表示获取当前用户的信息，`fields`属性指定要获取的字段，如name（用户名），picture（用户头像），email（邮箱）。获取到用户信息后，可以将信息传输到后端，完成登录流程。
以上就是基于OAuth协议的第三方登陆流程，用户授权后，第三方应用通过token请求用户信息，而无需获得用户的用户名和密码信息，保证了用户信息的安全性。为用户提供更便捷的体验。
