GoogleでログインするOAuth認証や、Map・ Photo（フォト）などの各種APIは便利ですが…わりと頻繁にAPIの仕様が変わるため、いつも悩まされます。
この記事では、JavaScirptで Googleにログインする方法や、各種リソースAPIの2020年の動向について紹介したいと思います。
スポンサーリンク
Google API Client Library for JavaScript
ネット記事を見る限りでは、2020年もGoogle JavaScirpt APIは、Google API Client Library for JavaScriptを使うのが主流になりそうだ。
認証（ログイン）が超楽
具体的なサンプルコードは後述するが、特に「Google API Client Library for JavaScript」を使えば、認証（ログイン）まわりの処理が、REST APIに比べてはるかに楽に実装できる。
各リソースへはREST APIを通じてアクセス
認証以外の、Google Map・ Photo（フォト）などの各リソースへのアクセスは、専用のライブラリーが提供されいる物もあるが、基本的にはREST APIで操作するのが一般的な感じです。
Google認証を実装してみる
では実際に、Google API Client Library for JavaScriptを使って、Googleにログインするサンプルコードを見ていきましょう。
事前準備
事前に、Google Cloud Platformへの登録と、API KEY、OAuthクライアントIDの作成をしておいてください。
あと、Googleアカウントのユーザー名も取得するため「People」APIも有効にしておいてください。
サンプルコード
公式のサンプルそのまま間がすごいですが、JavaScirptでGoogleにログインするサンプルコードです。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Say hello using the People API</title>
<meta charset='utf-8' />
</head>
<body>
<p>Say hello using the People API.</p>
<!--認証ボタン-->
<button id="authorize-button" style="display: none;">Googleでログイン</button>
<!--サインアウトボタン（認証済みの場合のみ表示され
<button id="signout-button" style="display: none;">サインアウト</button>
<div id="content"></div>
<script type="text/javascript">
var apiKey = '<APIキー>';
// Enter the API Discovery Docs that describes the APIs you want to
// access. In this example, we are accessing the People API, so we load
// Discovery Doc found here: https://developers.google.com/people/api/rest/
var discoveryDocs = ["https://people.googleapis.com/$discovery/rest?version=v1"];
// Enter a client ID for a web application from the Google API Console:
// https://console.developers.google.com/apis/credentials?project=_
// In your API Console project, add a JavaScript origin that corresponds
// to the domain where you will be running the script.
var clientId = '<OAuthクライアントID>';
// Enter one or more authorization scopes. Refer to the documentation for
// the API or https://developers.google.com/people/v1/how-tos/authorizing
// for details.
var scopes = 'profile';
var authorizeButton = document.getElementById('authorize-button');
var signoutButton = document.getElementById('signout-button');
function handleClientLoad() {
// Load the API client and auth2 library
gapi.load('client:auth2', initClient);
}
function initClient() {
gapi.client.init({
apiKey: apiKey,
discoveryDocs: discoveryDocs,
clientId: clientId,
scope: scopes
}).then(function () {
// Listen for sign-in state changes.
gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);
// Handle the initial sign-in state.
updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
authorizeButton.onclick = handleAuthClick;
signoutButton.onclick = handleSignoutClick;
});
}
function updateSigninStatus(isSignedIn) {
if (isSignedIn) {
authorizeButton.style.display = 'none';
signoutButton.style.display = 'block';
makeApiCall();
} else {
authorizeButton.style.display = 'block';
signoutButton.style.display = 'none';
}
}
function handleAuthClick(event) {
gapi.auth2.getAuthInstance().signIn();
}
function handleSignoutClick(event) {
gapi.auth2.getAuthInstance().signOut();
}
// Load the API and make an API call. Display the results on the screen.
function makeApiCall() {
gapi.client.people.people.get({
'resourceName': 'people/me',
'requestMask.includeField': 'person.names'
}).then(function(resp) {
var p = document.createElement('p');
var name = resp.result.names[0].givenName;
p.appendChild(document.createTextNode('Hello, '+name+'!'));
document.getElementById('content').appendChild(p);
});
}
</script>
<script async defer src="https://apis.google.com/js/api.js"
onload="this.onload=function(){};handleClientLoad()"
onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>
</body>
</html>
スポンサーリンク
さいごに
JavaScirptでGoogleにログインする方法について、2020年版の最新情報を解説してきました。
0 件のコメント:
コメントを投稿