jquery-ajaxでGitHub API v3のaccess token取得でAccess-Control-Allow-Originエラー発生
GitHub API v3でaccess tokenをとりたい!
GitHubAPIのOAuthのドキュメント(https://developer.github.com/v3/oauth/)によると、
GitHub APIで認証、access_token取得までの手順を簡単にまとめると
- GitHubでアプリケーション登録をする(https://github.com/settings/applications/new)
https://github.com/login/oauth/authorize?crient_id=***
(***は上で登録した際に発行されるClient ID)にアクセスしてもらう- GitHubで認証後、登録した際のAuthorization callback URLにコールバックされる
- URLに
?code=***
がついてくるので持っておく(一時的な認証コード) - POSTで
https://github.com/login/oauth/access_token
にアクセスする。
パラメータは登録で発行されたClient ID、Client Secretと、一つ上で返ってきたcodeの値 - めでたくaccess_token取得!
といきたかったところですが、、、
Access-Control-Allow-Originエラーにハマる
codeの取得まではすんなり行けたのですが、access_token取得のPOSTアクセスでAccess-Control-Allow-Originエラー発生。 こんなコードを書いていました。
$.ajax({ url: 'https://github.com/login/oauth/access_token', type: "POST", data: { cliend_id: "(Cliend IDの値)", client_secret: "(Cliend Secretの値)", code: "(codeの値)", }, success: function(json) { alert(json); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("error"); } });
やってみると
XMLHttpRequest cannot load https://github.com/login/oauth/access_token. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
見事にAccess-Control-Allow-Originエラー発生と。
このあたり(https://developer.github.com/v3/#cross-origin-resource-sharing)を見てみるとCORSに対応してるからアプリケーション登録してたら
レスポンスヘッダにAccess-Control-Allow-Origin: *
がつく的なこと書いてるけど・・・
一応確認してみよっと。
・・・
んーAccess-Control-Allow-Origin: *
ついてる気配ないなー。
てか、よくみるとCROSに対応してるのはhttps://api.github.com
やん・・
んー。
あれこれやってみましたができない。
調べていたところこの記事を発見。
http://blog.vjeux.com/2012/javascript/github-oauth-login-browser-side.html
記事作者のリポジトリを参考にしたら出来ました。(キーが垂れ流し・・)
https://github.com/vjeux/GithubLogin
$.ajax({ url: '/token.php?client_id=' + config("client_id") + '&client_secret=' + config("client_secret") + '&code=' + code, success: function(token) { alert(token); }, error: function(XMLHttpRequest, textStatus, errorThrown) { alert("error"); } });
token.php
<?php $data = 'client_id=' . $_GET['client_id'] . '&client_secret=' . $_GET['client_secret'] . '&code=' . urlencode($_GET['code']); $curl = curl_init("https://github.com/login/oauth/access_token"); curl_setopt($curl, CURLOPT_POSTFIELDS, $data); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); $response = curl_exec($curl); preg_match('/access_token=([0-9a-f]+)/', $response, $out); echo $out[1]; curl_close($curl); ?>
参考リンク