【google apis】GoogleのアカウントでAOuthを行う

GoogleのAOuthを使う方法です。

サマリー

目次

1. サイトのURL、リダイレクトするURLを用意する
2. google apisに認証するアプリケーションを登録する
3. 認証をリクエスト
4. 結果を受け取る

サイトのURL、リダイレクトするURLを用意する

googleに登録するためのサイトURLです。事前に用意します。

google apis認証するアプリケーションを登録する

google apisでアプリケーションの登録を行います。
１．アカウントを持っていない場合は作成する
２．ログインしてサイドメニューから「API ACCESS」を選択して「Create client ID…」からアプリケーションを登録できます。

認証をリクエスト

ここからが本番です。
ここに書いてあるとおりにすればよいのですが、テンプレートは下記のとおりです。

ここではクライアントサイドでの実行を紹介します。
https://accounts.google.com/o/oauth2/auth?
scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email
&state=%2Fprofile
&redirect_uri=URLエンコードしたリダイレクトURL　・・・１
&response_type=token
&client_id=クライアントID　・・・２

１と２はgoogle apisで登録・取得したものを使用します。

結果を受け取る

リダイレクト先のURLにアンカー（#）パラメータとしてアクセストークンが渡されます。
このトークンが、認可を行ったユーザーのデータにアクセスするために必要な鍵となる文字列です。
目的の情報を取得する際、リクエストパラメータとして埋め込むことになります。

		var str = "<br />";
		// First, parse the query string
		var params = {}, queryString = location.hash.substring(1),
		    regex = /([^&=]+)=([^&]*)/g, m;
		while (m = regex.exec(queryString)) {
			params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
			str += decodeURIComponent(m[1]) +":"+ decodeURIComponent(m[2]) + "<br />";
		}

				
		//document.getElementById("body").innerHTML = document.getElementById("body").innerHTML + str;
		
		if(　params["access_token"]==undefined ){//失敗の場合
			document.getElementById("body").innerHTML = document.getElementById("body").innerHTML
				+ "認証に失敗しました。<br />StatsCatをご利用頂くにはgoogleのアカウントで認証を行なって下さい。";
			
			console.log("failed");
		}else{//成功の場合
                }