Google OAuth 認証を簡単にしてトークンを取得するツールを作ったのソースコード

今回は「Google OAuth 認証を簡単に実行してトークンを取得するツールを作った」の内容です。

では以下ソースコードです。

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<div id="oauth">
<h2>OAuth認証</h2>
クライアントID<br>
<textarea id="o_client_id" rows="1" cols="80"></textarea><br>
リダイレクトURL<br>
<textarea id="o_redirect_uri" rows="1" cols="80"></textarea><br>
スコープ<br>
<textarea id="o_scope" rows="3" cols="80"></textarea><br>
スコープ一覧は<a href="https://developers.google.com/identity/protocols/googlescopes">こちら</a>
<br>
<button id="oauth_btn">OAuth認証</button>
</div>
<div id="token">
<h2>TokenとRefresh Tokenを取得</h2>
コード<br>
<textarea id="t_code" rows="1" cols="80"></textarea><br>
クライアントID<br>
<textarea id="t_client_id" rows="1" cols="80"></textarea><br>
クライアントシークレット<br>
<textarea id="t_client_secret" rows="1" cols="80"></textarea><br>
リダイレクトURL<br>
<textarea id="t_redirect_uri" rows="1" cols="80"></textarea><br>
<br>
<button id="token_btn">Token取得</button>
<button id="token_btn">Token取得</button><br>
結果<br>
トークン:access_token<br>
<textarea id="t_result_token" rows="2" cols="80"></textarea><br>
リフレッシュトークン:refresh_token<br>
<textarea id="t_result_refresh" rows="1" cols="80"></textarea><br>
有効期限:expires_in<br>
<textarea id="t_result_expires" rows="1" cols="80"></textarea><br>
</div>
<script>
var googleOAuth = {};
( function(){
"use strict";
var oauthUrl = 'https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=',
redirectUrl = '&redirect_uri=',
scopeUrl = '&scope=',
offlineUrl = '&access_type=offline&approval_prompt=force';
googleOAuth.init = function() {
if ( !_params()[ 'code' ] ) {
$( '#token' ).hide();
_textSet();
} else {
$( '#oauth' ).hide();
$( '#t_code' ).val( _params()[ 'code' ] );
_textSet();
}
};
function _textSet() {
$( '#o_client_id' ).val( $.cookie( 'o_client_id' ) );
$( '#o_redirect_uri' ).val( $.cookie( 'o_redirect_uri' ) );
$( '#o_scope' ).val( $.cookie( 'o_scope' ) );
$( '#t_client_id' ).val( $.cookie( 'o_client_id' ) );
$( '#t_client_secret' ).val( $.cookie( 't_client_secret' ) );
$( '#t_redirect_uri' ).val( $.cookie( 'o_redirect_uri' ) );
}
function _params() {
var vars = new Object,
params,
temp_params = window.location.search.substring( 1 ).split( '&' );
for( var i = 0; i < temp_params.length; i++ ) {
params = temp_params[ i ].split( '=' );
vars[ params[ 0 ] ] = params[ 1 ];
}
return vars;
}
function _createOAuthUrl() {
return oauthUrl + $( '#o_client_id' ).val() +
redirectUrl + $( '#o_redirect_uri' ).val() +
scopeUrl + $( '#o_scope' ).val() + offlineUrl;
}
$( "#oauth_btn" ).click( function( e ) {
window.location.href = _createOAuthUrl();
})
$( "#token_btn" ).click( function( e ) {
var postData = { 'code'          : _params()[ 'code' ],
'client_id'     : $( '#t_client_id' ).val(),
'client_secret' : $( '#t_client_secret' ).val(),
'redirect_uri'  : $( '#t_redirect_uri' ).val(),
'grant_type'    : 'authorization_code',
'access_type'   : 'offline' };
$.post(
"https://www.googleapis.com/oauth2/v4/token",
postData,
function( data ){
$( '#t_result_token' ).val( data.access_token );
$( '#t_result_refresh' ).val( data.refresh_token );
$( '#t_result_expires' ).val( data.expires_in );
}
).fail( function( data ) {
$( '#t_result_token' ).val( data.responseJSON.error_description );
$( '#t_result_refresh' ).val( '' );
$( '#t_result_expires' ).val( '' );
});
})
$( '#o_client_id' ).change( function() { $.cookie( 'o_client_id', $( '#o_client_id' ).val() ); });
$( '#o_redirect_uri' ).change( function() { $.cookie( 'o_redirect_uri', $( '#o_redirect_uri' ).val() ); });
$( '#o_scope' ).change( function() { $.cookie( 'o_scope', $( '#o_scope' ).val() ); });
$( '#t_client_id' ).change( function() { $.cookie( 'o_client_id', $( '#o_client_id' ).val() ); });
$( '#t_client_secret' ).change( function() { $.cookie( 't_client_secret', $( '#t_client_secret' ).val() ); });
$( '#t_redirect_uri' ).change( function() { $.cookie( 'o_redirect_uri', $( '#o_redirect_uri' ).val() ); });
})();
googleOAuth.init();
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

<h2>OAuth認証</h2>

クライアントID<br>

リダイレクトURL<br>

スコープ<br>

スコープ一覧は<a href="https://developers.google.com/identity/protocols/googlescopes">こちら</a>

<br>

<button id="oauth_btn">OAuth認証</button>

</div>

<h2>TokenとRefresh Tokenを取得</h2>

コード<br>

クライアントID<br>

クライアントシークレット<br>

リダイレクトURL<br>

<br>

<button id="token_btn">Token取得</button>

<button id="token_btn">Token取得</button><br>

結果<br>

トークン:access_token<br>

リフレッシュトークン:refresh_token<br>

有効期限:expires_in<br>

</div>

var googleOAuth = {};

( function(){

"use strict";

var oauthUrl = 'https://accounts.google.com/o/oauth2/auth?response_type=code&client_id=',

redirectUrl = '&redirect_uri=',

scopeUrl = '&scope=',

offlineUrl = '&access_type=offline&approval_prompt=force';

googleOAuth.init = function() {

if ( !_params()[ 'code' ] ) {

$( '#token' ).hide();

_textSet();

} else {

$( '#oauth' ).hide();

$( '#t_code' ).val( _params()[ 'code' ] );

_textSet();

}

};

function _textSet() {

$( '#o_client_id' ).val( $.cookie( 'o_client_id' ) );

$( '#o_redirect_uri' ).val( $.cookie( 'o_redirect_uri' ) );

$( '#o_scope' ).val( $.cookie( 'o_scope' ) );

$( '#t_client_id' ).val( $.cookie( 'o_client_id' ) );

$( '#t_client_secret' ).val( $.cookie( 't_client_secret' ) );

$( '#t_redirect_uri' ).val( $.cookie( 'o_redirect_uri' ) );

}

function _params() {

var vars = new Object,

params,

temp_params = window.location.search.substring( 1 ).split( '&' );

for( var i = 0; i < temp_params.length; i++ ) {

params = temp_params[ i ].split( '=' );

vars[ params[ 0 ] ] = params[ 1 ];

}

return vars;

}

function _createOAuthUrl() {

return oauthUrl + $( '#o_client_id' ).val() +

redirectUrl + $( '#o_redirect_uri' ).val() +

scopeUrl + $( '#o_scope' ).val() + offlineUrl;

}

$( "#oauth_btn" ).click( function( e ) {

window.location.href = _createOAuthUrl();

})

$( "#token_btn" ).click( function( e ) {

var postData = { 'code' : _params()[ 'code' ],

'client_id' : $( '#t_client_id' ).val(),

'client_secret' : $( '#t_client_secret' ).val(),

'redirect_uri' : $( '#t_redirect_uri' ).val(),

'grant_type' : 'authorization_code',

'access_type' : 'offline' };

$.post(

"https://www.googleapis.com/oauth2/v4/token",

postData,

function( data ){

$( '#t_result_token' ).val( data.access_token );

$( '#t_result_refresh' ).val( data.refresh_token );

$( '#t_result_expires' ).val( data.expires_in );

}

).fail( function( data ) {

$( '#t_result_token' ).val( data.responseJSON.error_description );

$( '#t_result_refresh' ).val( '' );

$( '#t_result_expires' ).val( '' );

});

})

$( '#o_client_id' ).change( function() { $.cookie( 'o_client_id', $( '#o_client_id' ).val() ); });

$( '#o_redirect_uri' ).change( function() { $.cookie( 'o_redirect_uri', $( '#o_redirect_uri' ).val() ); });

$( '#o_scope' ).change( function() { $.cookie( 'o_scope', $( '#o_scope' ).val() ); });

$( '#t_client_id' ).change( function() { $.cookie( 'o_client_id', $( '#o_client_id' ).val() ); });

$( '#t_client_secret' ).change( function() { $.cookie( 't_client_secret', $( '#t_client_secret' ).val() ); });

$( '#t_redirect_uri' ).change( function() { $.cookie( 'o_redirect_uri', $( '#o_redirect_uri' ).val() ); });

})();

googleOAuth.init();

</script>

これもtextにコピーすればすぐに使えます。

関連