質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Gmail

GmailとはGoogleによって提供されているウェブメールのサービスのことです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

0回答

2658閲覧

FirebaseのGoogle認証を行ったあと、Gmailのメールを取得したい。

FeeRiot

総合スコア8

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

Gmail

GmailとはGoogleによって提供されているウェブメールのサービスのことです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

1クリップ

投稿2017/05/12 02:10

###前提・実現したいこと
FirebaseでGmailのメールを取得するWebアプリを作ろうと考えています。
今現在、FirebaseのGoogle認証とGmailのApiによる情報の取得を別々にできるところまで理解しました(それぞれのサンプルプログラムを動かした程度です)

ただ、アプリ上でそれらをつなげると、FirebaseのGoogle認証を行ったあと、さらにGmailの認証を行わなければならないので、できれば1回で済ませたいです。

FirebaseのGoogle認証後にgoogleのアクセストークンとユーザー情報が発行されますが、その情報をもとにGmailを引っ張ってこれるものなのでしょうか?
試したGmail API QuickstartのプログラムにはクライアントID以外は変更する箇所がなかったので、根本的に見当違いなことをしているのかもしれません。

できる場合、該当のドキュメントなどでも教えて戴けると助かります。
よろしくお願い致します。

###該当のソースコード
#####Google認証によるログイン
参照 https://developers.google.com/gmail/api/quickstart/js

<button class="authBtn" disabled></button> <span class="userId"></span> <script> var AuthUI = { init: function(){ AuthUI.provider = new firebase.auth.GoogleAuthProvider(); AuthUI.elAuthBtn = document.querySelector('.authBtn'); AuthUI.elUserId = document.querySelector('.userId'); AuthUI.draw(); AuthUI.elAuthBtn.addEventListener('click', function(){ AuthUI.doAuth(); }); firebase.auth().getRedirectResult().then(function(result) { AuthUI.elAuthBtn.disabled = false; if (result.credential) { // This gives you a Google Access Token. You can use it to access the Google API. var token = result.credential.accessToken; } if(result.user){ AuthUI.data.authed = true; AuthUI.data.userId = result.user.email; AuthUI.draw(); } }).catch(function(error) { // Handle Errors here. var errorCode = error.code; var errorMessage = error.message; // The email of the user's account used. var email = error.email; // The firebase.auth.AuthCredential type that was used. var credential = error.credential; // ... }); }, data: { authed: false, userId: '', info: '' }, draw: function(){ AuthUI.elAuthBtn.textContent = AuthUI.data.authed ? 'LOGOUT' : 'LOGIN'; AuthUI.elUserId.textContent = AuthUI.data.userId; }, doAuth: function(){ if(AuthUI.data.authed){ firebase.auth().signOut().then(function() { AuthUI.data.authed = false; AuthUI.data.userId = ''; AuthUI.draw(); }, function(error) { // An error happened. }); } else { firebase.auth().signInWithRedirect(AuthUI.provider); } } }; AuthUI.init(); </script>

#####Gmailの情報を取得
参照 http://qiita.com/cyokodog@github/items/eeedc5c94477602ec9f3

<!DOCTYPE html> <html> <head> <title>Gmail API Quickstart</title> <meta charset='utf-8' /> </head> <body> <p>Gmail API Quickstart</p> <!--Add buttons to initiate auth sequence and sign out--> <button id="authorize-button" style="display: none;">Authorize</button> <button id="signout-button" style="display: none;">Sign Out</button> <pre id="content"></pre> <script type="text/javascript"> // Client ID and API key from the Developer Console var CLIENT_ID = '<YOUR_CLIENT_ID>'; // Array of API discovery doc URLs for APIs used by the quickstart var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest"]; // Authorization scopes required by the API; multiple scopes can be // included, separated by spaces. var SCOPES = 'https://www.googleapis.com/auth/gmail.readonly'; var authorizeButton = document.getElementById('authorize-button'); var signoutButton = document.getElementById('signout-button'); /** * On load, called to load the auth2 library and API client library. */ function handleClientLoad() { gapi.load('client:auth2', initClient); } /** * Initializes the API client library and sets up sign-in state * listeners. */ function initClient() { gapi.client.init({ discoveryDocs: DISCOVERY_DOCS, clientId: CLIENT_ID, 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; }); } /** * Called when the signed in status changes, to update the UI * appropriately. After a sign-in, the API is called. */ function updateSigninStatus(isSignedIn) { if (isSignedIn) { authorizeButton.style.display = 'none'; signoutButton.style.display = 'block'; listLabels(); } else { authorizeButton.style.display = 'block'; signoutButton.style.display = 'none'; } } /** * Sign in the user upon button click. */ function handleAuthClick(event) { gapi.auth2.getAuthInstance().signIn(); } /** * Sign out the user upon button click. */ function handleSignoutClick(event) { gapi.auth2.getAuthInstance().signOut(); } /** * Append a pre element to the body containing the given message * as its text node. Used to display the results of the API call. * * @param {string} message Text to be placed in pre element. */ function appendPre(message) { var pre = document.getElementById('content'); var textContent = document.createTextNode(message + '\n'); pre.appendChild(textContent); } /** * Print all Labels in the authorized user's inbox. If no labels * are found an appropriate message is printed. */ function listLabels() { gapi.client.gmail.users.labels.list({ 'userId': 'me' }).then(function(response) { var labels = response.result.labels; appendPre('Labels:'); if (labels && labels.length > 0) { for (i = 0; i < labels.length; i++) { var label = labels[i]; appendPre(label.name) } } else { appendPre('No Labels found.'); } }); } </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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問