うるおいらんど

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

FirebaseJavaScript

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

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

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

 

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

 

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

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

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

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

 

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

<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部分の最終コード

https://gist.github.com/uruly/762dac308e2b90524466d4fb8c1ddbfb

 

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

 

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

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

 

ほいでは〜

参考リンク

Comments

コメントはありません。

現在コメントフォームは工事中です。