html调用github的api,调用Github登录API接入到WordPress

点击试试使用Github登录我博客。

随着使用Github的人越来越多，为自己的网站添加Github登录功能也越来越有必要了。Github开放了登录API，第三方网站可以通过调用Github的OAuth相关API读取到登录用户的基本信息，从而使得用户可以通过Github登录到我们的网站。今天来介绍一下如何使用Github的OAuth相关API登录到Wordpress。

第一步，先到Github网站注册一个应用程序applications：

到https://github.com/settings/applications/new注册应用程序。注册完之后，我们将获取到Client ID和Client Secret，这两个信息将会在后面的开发中使用到。

第二步，重定向用户请求到GitHub，获取code信息

我们需要向https://github.com/login/oauth/authorize发送get请求，获取code信息。发送get请求的时候，需要带几个参数：

client_id：这个参数是必须的，这就是我们在第一步注册应用程序之后获取到的Client ID；

redirect_uri：该参数可选，当我们从Github获取到code码之后跳转到我们自己网站的URL；

scope：该参数可选。就是你期待你网站需要调用Github哪些信息，可以填写多个，以逗号分割，比如：scope=user,public_repo。如果不填写，那么你的应用程序将只能读取Github公开的信息，比如公开的用户信息，公开的库(repository)信息以及gists信息；

state：这个是你自己设定的，它用于防止跨站请求伪造攻击。

如果请求有效的话，Github将返回code码和state，并重定向到redirect_uri上。比如： /?code=b2559597e2eff6f69885&state=e7302b527991a155a36b12cf823c76bc

上面的/就是redirect_uri，state是我们自己设定的，而code是Github返回的。

第三步，通过code码获取access_token

在获取到code之后，我们就可以向Github获取access_token，只需要向https://github.com/login/oauth/access_token发送请求即可，不过只能通过POST请求，同时也需要带几个参数，如下：

client_id：这个参数是必须的，这就是我们在第一步注册应用程序之后获取到的Client ID；

client_secret：这个参数是必须的，是我们在第一步注册应用程序之后获取到的Client Secret；

code：这就是第二步获取的code码；

redirect_uri：该参数可选，当我们从Github获取到access_token之后跳转到我们自己网站的URL；

如果请求信息有效，Github将返回access_token码，并跳转到redirect_uri。默认情况下，Github返回的信息格式如下： access_token=2ff133ca8ae6912edb607db07ee953da9eafb7c2&scope=user&token_type=bearer

这个格式的信息不太友好。不过我们可以在请求的时候设置Accept头信息，可以根据你需要返回json格式或xml的响应信息，如果请求头带有Accept: application/json，将返回Json格式信息： {

access_token: "2ff133ca8ae6912edb607db07ee953da9eafb7c2",

token_type: "bearer",

scope: "user"

}

如果请求头带有Accept: application/xml，将返回Xml格式信息：

bearer

user

2ff133ca8ae6912edb607db07ee953da9eafb7c2

返回的access_token信息很有用，我们可以通过这个进一步获取用户的其他信息，比如登录用户名，Email信息等。

第四步，获取用户登录信息

只需要向https://api.github.com/user?access_token=xxx发送GET请求，即可获取到登录用户的基本信息，下面是通过这个URL获取到我的Github基本信息： {

"login": "397090770",

"id": 5170878,

"avatar_url": "https://avatars.githubusercontent.com/u/5170878?v=3",

"gravatar_id": "",

"url": "https://api.github.com/users/397090770",

"html_url": "https://github.com/397090770",

"followers_url": "https://api.github.com/users/397090770/followers",

"following_url": "https://api.github.com/users/397090770/following{/other_user}",

"gists_url": "https://api.github.com/users/397090770/gists{/gist_id}",

"starred_url": "https://api.github.com/users/397090770/starred{/owner}{/repo}",

"subscriptions_url": "https://api.github.com/users/397090770/subscriptions",

"organizations_url": "https://api.github.com/users/397090770/orgs",

"repos_url": "https://api.github.com/users/397090770/repos",

"events_url": "https://api.github.com/users/397090770/events{/privacy}",

"received_events_url": "https://api.github.com/users/397090770/received_events",

"type": "User",

"site_admin": false,

"name": "iteblog",

"company": "",

"blog": "/",

"location": "Beijing",

"email": "wyphao.2007@163.com",

"hireable": false,

"bio": null,

"public_repos": 28,

"public_gists": 1,

"followers": 4,

"following": 2,

"created_at": "2013-08-06T03:22:52Z",

"updated_at": "2015-04-11T14:25:57Z",

"private_gists": 0,

"total_private_repos": 0,

"owned_private_repos": 0,

"disk_usage": 489,

"collaborators": 0,

"plan": {

"name": "free",

"space": 976562499,

"collaborators": 0,

"private_repos": 0

}

}

到这里，我想怎么处理就怎么处理，比如将返回信息里面的email作为登录名，等等。如果是第一次通过Github登录到Wordpress，我们需要将这些信息存储到Wordpress用户wp_users表中，并根据需要将其他一些信息，存储到wp_usermeta表中。

第五步，如何设置Wordpress中登录状态

通过Github登录到网站，需要设置一些信息，否则Wordpress无法知道用户登录到系统。Wordpress是通过设置Cookie信息来标记用户登录到Wordpress系统，所以，可以在完成用户信息获取之后，将用户的登录信息存储到Cookie中，如下： wp_set_auth_cookie($user_id,true,false);

wp_set_auth_cookie函数是Wordpress提供的，这个就可以存储用户的登录信息。

更多关于如何使用Github的OAuth相关API登录第三方网站，请参照https://developer.github.com/v3/oauth/官方文档。