ブログ強化月間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を組み込みたい！
自分が取った方法は
- GoogleAPIで認証をする
- 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の方から。
- gapi.loadをする
- gapi.clientを初期化する(gapi.client.init)
- gapi.clientでYouTube Data APIをロードする(gapi.client.load)
- 既にサインインされているかどうかで判別し、サインインされていなければサインインして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がないよとかいっぱい言われましたが、とりあえずこれで一応動いています。
ほいでは〜
コメント時の注意
「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。