Angular4経由でGoogleサービスアカウントに接続するときに「無効な許可タイプ」

Question

私はこの問題を回避するために頭を悩まされていて、ガイダンスを開いています。 Google Cloud Datastoreサービスアカウントへのアクセスを作成するためにOauthを使用しているAngular 4アプリがあります。私はJWTを使ってそれをエンコードしてGoogleに渡しています。以下は、署名とHTTPリクエストの関数です。

エンコードが正しくない場合や、APIに正しくアクセスしようとしていない場合は、わかりません。私が間違っていた可能性がある場所や、nodejをピギーバックしていないこれを行うためのよりよい方法については、どのようなsuggetionsでも利用できます。トークン下記取得する

機能：

getGoogleToken(){ 

let key = this.createGoogleSig(); 
let params = { 
    grant_type: 'urn:ietf:params:oauth:grant-type:jwt-bearer', 
    assertion: key 
}; 

let myheaders = new Headers; 

myheaders.append('Content-Type', 'application/x-www-form-urlencoded') 

console.log(params); 

this.http.post('https://www.googleapis.com/oauth2/v4/token', params, { headers : myheaders}).subscribe(
    data => this.thing = data.toString(), 
    err => console.log(err), 
() => console.log('Request Complete') 
); 

}

をコード

createGoogleSig(){ 

let now = (Date.now()/1000).toFixed(0); 
let exp = +now + 1800; 

let key = { 
    "type": "service_account", 
    "project_id": "jenenginecms", 
    "private_key_id": "---", 
    "private_key": "-----BEGIN PRIVATE KEY-----cut for brevity---END PRIVATE KEY-----\n", 
    "client_email": "pepperbirdcms@jenenginecms.iam.gserviceaccount.com", 
    "client_id": "---", 
    "auth_uri": "https://accounts.google.com/o/oauth2/auth", 
    "token_uri": "https://accounts.google.com/o/oauth2/token", 
    "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs", 
    "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/pepperbirdcms%40jenenginecms.iam.gserviceaccount.com" 
} 




let claimObj = { 
    "iss": key.client_email, 
    "scope": "https://www.googleapis.com/auth/datastore", 
    "aud": "https://www.googleapis.com/oauth2/v4/token", 
    "exp": exp, 
    "iat": +now 
} 
console.log(claimObj); 

let header = Base64.encodeURI('{"alg":"RS256","typ":"JWT"}'); 

let claimSet = Base64.encodeURI(JSON.stringify(claimObj)); 

let sig = new KJUR.crypto.Signature({ "alg": "SHA256withRSA" }); 

let privateKey = key.private_key; 



let ret = encryptSignature(); 

let jwt = header + "." + claimSet + "." + ret; 

console.log(jwt) 
return jwt; 

function encryptSignature() { 
    sig.init(privateKey); 
    sig.updateString(header + "." + claimSet); 
    let cleaned_hex = sig.sign() 

    let input = new Array(); 
    for (let i = 0; i < cleaned_hex.length/2; i++) { 
    let h = cleaned_hex.substr(i * 2, 2); 
    input[i] = parseInt(h, 16); 
    } 

    let base64_chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/" 

    let ret = ''; 
    let i = 0; 
    let j = 0; 
    let char_array_3 = new Array(3); 
    let char_array_4 = new Array(4); 
    let in_len = input.length; 
    let pos = 0; 

    while (in_len--) { 
    char_array_3[i++] = input[pos++]; 
    if (i == 3) { 
     char_array_4[0] = (char_array_3[0] & 0xfc) >> 2; 
     char_array_4[1] = ((char_array_3[0] & 0x03) << 4) + ((char_array_3[1] & 0xf0) >> 4); 
     char_array_4[2] = ((char_array_3[1] & 0x0f) << 2) + ((char_array_3[2] & 0xc0) >> 6); 
     char_array_4[3] = char_array_3[2] & 0x3f; 

     for (i = 0; (i < 4); i++) 
     ret += base64_chars.charAt(char_array_4[i]); 
     i = 0; 
    } 
    } 

    if (i) { 
    for (j = i; j < 3; j++) 
     char_array_3[j] = 0; 

    char_array_4[0] = (char_array_3[0] & 0xfc) >> 2; 
    char_array_4[1] = ((char_array_3[0] & 0x03) << 4) + ((char_array_3[1] & 0xf0) >> 4); 
    char_array_4[2] = ((char_array_3[1] & 0x0f) << 2) + ((char_array_3[2] & 0xc0) >> 6); 
    char_array_4[3] = char_array_3[2] & 0x3f; 

    for (j = 0; (j < i + 1); j++) 
     ret += base64_chars.charAt(char_array_4[j]); 

    while ((i++ < 3)) 
     ret += '='; 

    } 
    return ret; 
} 

}

Answer 1

署名を作成するためには、実際には完全な誤りは非常に役立ちました:)

は、例えば、この要求を取る：私はこれを実行すると

POST https://www.googleapis.com/oauth2/v4/token HTTP/1.1 
Host: www.googleapis.com 
Content-type: application/x-www-form-urlencoded 

grant_type=urn:ietf:params:oauth:grant-type:jwt-bearer 

、私は

{ 
"error": "invalid_request", 
"error_description": "Missing required parameter: assertion" 
} 

誤りであるが、それは別のエラーであるため、」完全に細かいことを取得します。 Googleがこの補助金の種類を認識していることが証明されています。あなたのエラーメッセージを見てください：

"error_description": "Invalid grant_type: " 

説明文字列はコロンとスペースで終わっています。これは、サーバーが要求本体を受信しなかったか、それを解釈できなかったことを示しています。これを証明するために、私はgrant_type=thisdoesntexistで、この時間を別の要求を送信し、私はこれを得た：あなたのPOSTリクエストに欠陥があることを意味

{ 
"error": "unsupported_grant_type", 
"error_description": "Invalid grant_type: thisdoesntexist" 
} 

。考えられる問題は2つあります。

1. ヘッダーが正しく設定されていません。あなたのようにContent-type: application/x-www-form-urlencodedを使用するのは正しいアイデアですが、ヘッダーが正しくリクエストに添付されていない可能性がありますか？

2. リクエストボディが正しく設定されていません。

私はあなたが正しくthis.http.post呼び出し、私はそれを行うことになっているもの見当がつかないdata => this.thing = data.toString(),そのうち特にラインを実施しているかを再確認することをアドバイス。

これを行うことで、間違いがない場合は、リクエストを監視することができます。このためには、Fiddlerのようなツールを使用するか、ローカルのWebサーバー上で、ヘッダーとメッセージ本文/ POSTパラメータをエコーし​​、アプリケーション内で呼び出すだけでhttps://www.googleapis.com/oauth2/v4/tokenの代わりにスクリプトをすばやく設定できます。