Google APIとFirebaseでログイン認証し、YouTubeのチャンネルIDを取得してみた。【JavaScript】

ブログ強化月間2日目です。どうも、Reoです。

YouTubeのアカウント(厳密にはGoogle)でログインして、チャンネルIDを取得してみましたのでざっくりと紹介したいと思います。

Firebaseを使ってYouTubeのチャンネルIDを取得したかったんですが、Firebaseだけではダメっぽいので、Google APIとFirebaseを組み合わせて取得しました。

 

jsはチョット苦手なので、あまり丁寧には書けませんし、このアプローチで正解なのかわかりませんがザックリと書いていきたいと思います。

 

Firebaseからコードを貼り付けよう

まずはFirebaseのコンソールを開き、プロジェクトを選択 > Authentication より

右上のウェブ設定をクリックします。

ほいでそこに出てきたコードを適当に</body>の直前ぐらいに貼り付けます。<head>内でも。

 

貼り付けたのは以下のようなものです。

<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "適当な文字列",
    authDomain: "プロジェクト名.firebaseapp.com",
    databaseURL: "https://プロジェクト名.firebaseio.com",
    projectId: "プロジェクト名",
    storageBucket: "プロジェクト名.appspot.com",
    messagingSenderId: "数列"
  };
  firebase.initializeApp(config);
</script>

これに少し付け加えます。

 

<script src="https://www.gstatic.com/firebasejs/5.4.2/firebase.js"></script>
<script src="https://apis.google.com/js/api.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "なんか文字列",
    authDomain: "プロジェクト名.firebaseapp.com",
    databaseURL: "https://プロジェクト名.firebaseio.com",
    projectId: "プロジェクト名",
    storageBucket: "プロジェクト名.appspot.com",
    messagingSenderId: "数列",
    clientId: "文字列.apps.googleusercontent.com",
    scopes: [
        "email",
        "profile",
        "https://www.googleapis.com/auth/youtube.readonly"
    ],
    discoveryDocs: [
        "https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest"
    ]
  };
  firebase.initializeApp(config);
</script>

GoogleAPI用のscriptタグとclientId・scopes・discoveryDocsを追加しています。

 

Scope

GoogleAPIのscope一覧は「OAuth 2.0 Scopes for Google APIs」に書かれています。

今回は、この中からYouTube Data APIのreadonlyを用いています。

 

ClientID

clientIdは、Google APIsでプロジェクトを作成しておき、「認証情報 」からOAuth 2.0クライアントIDをコピーして貼り付けます。

なければ認証情報の作成をしてクライアントIDを取得してください。

 

DiscoveryDocs

discoveryDocsは、「Discovery Document: list」よりyoutubeと検索して、discoveryRestUrlをコピーして貼り付けします。

ザックリですがこんな感じです。

英語ですが、「Using Google APIs with Firebase Auth and Firebase UI on the Web」にGIF画像で説明されているのでわからなければチラ見してみてください!

 

YouTube(Google)でログインしよう!

YouTubeのチャンネルIDを取得すること自体は、Firebase 無しでできます。

ですが、ここにFirebaseを組み込みたい!

自分が取った方法は

  1. GoogleAPIで認証をする
  2. Firebaseでトークンを用いて認証する

という順番での認証です。

これが逆だと上手いこといかない。でも普通はFirebaseで認証をメインにしているので、そっちをした後にGoogleAPIで認証したくなっちゃう。

チャンネルIDの取得自体は、1と2の間でできちゃいます。

 

まずは適当にログインボタンを配置しておきます。

<button onclick="youtubeLogin()" type="button">ログイン</button>

 

ほいでログインの中身を書きます。

function youtubeLogin() {
    gapi.load('client:auth2', () => {
        gapi.client.init({
            apiKey: config.apiKey,
            clientId: config.clientId,
            discoveryDocs: config.discoveryDocs,
            scope: config.scopes.join(' '),
        }).then(() => {
            gapi.client.load('youtube', 'v3', () => {
                if (gapi.auth2.getAuthInstance().isSignedIn.get()) {
                    // サインイン済みの場合
                    var usr = gapi.auth2.getAuthInstance().currentUser.get();
                    var token = usr.getAuthResponse().id_token;
                    firebaseLogin(token);
                    
                } else {
                    gapi.auth2.getAuthInstance().signIn().then(() => {
                        // サインインする
                        var usr = gapi.auth2.getAuthInstance().currentUser.get();
                        var token = usr.getAuthResponse().id_token;
                        firebaseLogin(token);
                    }).catch(error => { console.log(error) })
                }
            })
        }).catch(function(error) {
            console.log(error);
            alert(error.message);
        });
    })
}
// Firebase側でログインをする
function firebaseLogin(token) {
    var creds = firebase.auth.GoogleAuthProvider.credential(token);
    firebase.auth().signInAndRetrieveDataWithCredential(creds).then((result) => {
        if (result) {
            let user = result.user;
            console.log(user);
            // ログインできたのでどっかに遷移するとか
        }
     }).catch (error => {
         console.log(error);
     })
}

とりあえず、ざっくりと全体コードを先に貼らせていただきました。チャンネルIDはまだ取得して無いです。

 

まずはyoutubeLoginの方から。

  1. gapi.loadをする
  2. gapi.clientを初期化する(gapi.client.init)
  3. gapi.clientでYouTube Data APIをロードする(gapi.client.load)
  4. 既にサインインされているかどうかで判別し、サインインされていなければサインインしてIDトークンをFirebase側に渡す

という感じの流れです。

認証だけなら2と3の処理は飛ばしても大丈夫かも・・・?です。

4のところで、サインインされていなければGoogleの認証画面に飛ばされます。サインインされていれば認証画面は表示されません。

clientの初期化では先ほどのscopes等を使っています。

 

んでFirebase側では、tokenを使える形に整形して、signInAndRetrieveDataWithCredentialでログインします。

 

YouTubeのチャンネルIDを取得しよう!

さっくりとチャンネルIDをコンンソールに表示してみます。

gapi側でログインされている状態で、

function getChannelID() {
    var request = gapi.client.youtube.channels.list({
        mine: true,
        part: 'contentDetails'
      });
    request.execute(function(response) {
        playlistId = response.result.items[0].id;
        console.log(playlistId); // これがチャンネルIDだああああああああああ
    });
}

を呼び出します。

これでチャンネルIDの取得ができました。チャンネルIDっていうか、youtubeのIDなんですが、

https://www.youtube.com/channel/取得したチャンネルID

でチャンネルページのURLを取得することができます。
ちなみにチャンネルIDをYouTube側で変えている場合の検証はしていません(´;ω;`)

検証したらまた追記等しようと思います。

 

js部分の最終コード

 

5日ぐらいは戦いました。やっぱjsは苦手じゃい。なんか色々と良く無いコードな気がします。わからんけど。

 

とりあえずこんな感じでやりました!

gapiがないよとかgapi.clientがないよとかgapi.client.youtubeがないよとかいっぱい言われましたが、とりあえずこれで一応動いています。

 

ほいでは〜

コメントは認証制です。詳しくは下記の注意をお読みください。お気軽にコメントお願いします!

Write a Comment

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

Related Memo...

【pure js】アイキャッチの下などにあるヘッダーをスクロール後固定する

pureでvanillaな素のものjsで。

[ アイキャッチ画像 ]

[ ヘッダー ]

[ コンテンツ ]

みたいな作りのwebページでスクロール後ヘッダーを固定する。

固定解除部分は 元のcssにあわせて書けばおkです。

 

JavaScript

iOSでiframeのwidthの挙動がおかしくなる時の対処メモ【pure js】

pureでvanillaな素のjsで。

どういう挙動かというと

iframeロード → 表示(多分画面幅くらい)→ ちょっと縮小 → さらに縮小して目的のwidthになる

という感じ。画像は載せられないので割愛します。

指定したwidthからはみ出た状態で始まり、最後には指定したwidthになるといった挙動ですね。

結局

var iframe = document.createElement('iframe');
iframe.width = '100%';
iframe.height = '100%';

とかいう風に書いているところに

iframe.scrolling = 'no';

この一文を入れてやると解決しました。

viewportとかwidthのこといっぱい調べたのになんのことはない・・・。

JavaScript

【vagrant+CentOS+CakePHP】JavaScriptファイルで何書いてもillegal characterって言われたときメモ..

jsファイルに何かいてもillegal characterって言われて泣くかと思った。(ブラウザはFirefox)

vagrantで下の記事通りに設定したらちゃんとjs動くようになった。本当に助かった・・・。

JavaScript
more