欢迎关注Hadoop、Spark、Flink、Hive、Hbase、Flume等大数据资料分享微信公共账号:iteblog_hadoop
  1. 文章总数:978
  2. 浏览总数:11,981,816
  3. 评论:3939
  4. 分类目录:106 个
  5. 注册用户数:6130
  6. 最后更新:2018年12月15日
过往记忆博客公众号iteblog_hadoop
欢迎关注微信公众号:
iteblog_hadoop
大数据技术博客公众号bigdata_ai
大数据猿:
bigdata_ai

调用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上。比如:

https://www.iteblog.com/?code=b2559597e2eff6f69885&state=e7302b527991a155a36b12cf823c76bc

  上面的https://www.iteblog.com/就是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格式信息:

<OAuth>
  <token_type>bearer</token_type>
  <scope>user</scope>
  <access_token>2ff133ca8ae6912edb607db07ee953da9eafb7c2</access_token>
</OAuth>

返回的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": "https://www.iteblog.com/",
  "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/官方文档。
本博客文章除特别声明,全部都是原创!
转载本文请加上:转载自过往记忆(https://www.iteblog.com/)
本文链接: 【调用Github登录API接入到WordPress】(https://www.iteblog.com/archives/1314.html)
喜欢 (12)
分享 (0)
发表我的评论
取消评论

表情
本博客评论系统带有自动识别垃圾评论功能,请写一些有意义的评论,谢谢!
(9)个小伙伴在吐槽
  1. 你那没有遇到跨域的问题吗? 我这跨域一直没解决、、、求指点
    kevin2016-10-10 10:55 回复
    • 调用github的auth有跨域问题?贴下错误吧,我这没那个问题。
      w3970907702016-10-10 11:37 回复
      • XMLHttpRequest cannot load https://github.com/login/oauth/access_token?client_id=e1ebc6b08bb6d64349f2&…281545aff84d6edccea7ed78c30b63&code=0aeb763ae59d513e0c6a&state=%27kevin%27. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://192.168.8.67:8080' is therefore not allowed access.request-header如下:Accept:application/json, text/plain, */*Accept-Encoding:gzip, deflate, brAccept-Language:zh-CN,zh;q=0.8,en;q=0.6Cache-Control:no-cacheConnection:keep-aliveContent-Length:187Content-Type:application/x-www-form-urlencodedHost:github.comOrigin:http://192.168.8.67:8080Pragma:no-cacheReferer:http://192.168.8.67:8080/index?code=0aeb763ae59d513e0c6a&state=%27kevin%27User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 Safari/537.36请求参数如下:client_id:e1ebc6b08bb6d64349f2redirect_uri:http://192.168.8.67:8080/indexscope:' 'state:'kevin'allow_signup:trueclient_secret:9990a76c6a281545aff84d6edccea7ed78c30b63code:0aeb763ae59d513e0c6astate:'kevin'本地地址:127.0.0.1:8080
        kevin2016-10-10 13:00 回复
        • 你填写的网站地址是不是和上面的redirect_uri不一致?
          w3970907702016-10-10 13:06 回复
          • 是一样的,都是http://192.168.8.67:8080/index 这个 github里面的Homepage URL也是这个
            kevin2016-10-10 13:09
        • 如果你使用的是jquery发送请求的,如下:
          var jsontree = [];$.ajax({ url: "http://192.168.8.67:8080/index", type: "GET", dataType: 'JSON', success: function(result){ jsontree = result; }});
          你把上面的dataType: 'JSON'替换为dataType: 'JSONP'即可解决上面的跨域问题。或者你可以在请求的头部加上以下的信息:
          header('content-type: applicatiion/json; charset=utf-8');header("access-control-allow-origin:*");
          祝好
          w3970907702016-10-10 13:47 回复
    • 你发送数据的时候是不是用到了jQuery?
      w3970907702016-10-10 13:22 回复
  2. wp_set_auth_cookie($user_id,true,false);请问这个在哪里设置
    HTS2016-06-19 10:36 回复
    • 获取到用户登录信息之后就可以设置。
      iteblog2016-08-08 18:01 回复