ホーム / 開発 /

自サイトでOauth認証をやりたい。/ Blogger JavaScript開発１

2018年8月6日月曜日

JavaScript Web ブログ プログラミング 開発

画像：てらこや.work



Oauth認証とは

みなさん、Twitter連携アプリって使ったことありますか？
アプリ★メーカーとか有名ですよね。


他にもいろんな連携アプリがあるんですけど
それの認証のシステムがこのOauth認証です。

詳しくはその記事見てください。



このサイトでOauth認証がしたい

自サイトでOauth認証することができればいろいろな活動の幅が広がるんだろうなぁ
と思っていたので、今回挑戦してみます。

使えるのはJavaScriptとHTML

このサイトはGoogleのBloggerというサービスをめっちゃ改造して
作ってるんですけど、Bloggerは基本的にJavaScript(以下JS)しか使えないんですよね。
（海外の記事でPHP使えるとか書いてありましたけど、よくわからん）


そこで今回はJSとHTML縛りです。

情報収集

まずは手がかりがないと進むことはできないので
進むべき道を前例をたよりに見つけます。

今回の要件にピッタリな記事がありました。
どうやらOauth.ioというものが深く関係があるみたい。


簡単に説明すると、Twitterと僕たちの間を取り繕ってくれるということですね。
なんて良心的なんだ。


それで、Oauth.ioを動かすには、いくつかライブラリが必要なんですけど

インストールできなくね？

そう、これはブログサービス。
ライブラリなどインストールできるはずがないのです。


というわけで調べてみたら

なんと前例がありました。
ファイルをソースとして読み込んで、使うということですね。


すごい。


それでこのページのjquery-2.1.3.min.jsに当たる中枢となるファイル（利用すべきファイル）はどれなんだろう。。。

ライブラリの追加


これがjqueryのGithubのソースです。
oauth.jsと良く似ていると思うんですよね。


↑これがoauth.jsのソース


落としてアップロード、それを使うってのもなんかめんどくさいので、今回はgithubのファイルを直接使いたいと思います。


githubにあるjsのファイルを直接読み込んで利用する方法です。


RAWについてはこの記事を参照ください。


ここにRAW化して利用したいjsのファイルのURLを入力すると
RAW化されたURLが返ってきます


oauth.jsの使うファイルですが、いろいろ見てたら

https://rawgit.com/oauth-io/oauth-js/master/dist/oauth.js

のファイルを使っていたので、こちらを利用します



ライブラリの追加方法ですが

今回はBloggerなので、テーマ　＞　HTMLの編集からHTML編集画面に入って
<head>～</head>の中に設置します。

oauth.js (oauth io)
<script src='https://rawgit.com/oauth-io/oauth-js/master/dist/oauth.js' type='text/javascript'/>

sha1
<script src='http://labs.cybozu.co.jp/blog/mitsunari/2007/07/24/js/sha1.js' type='text/javascript'/>


再びこの記事に戻るんですが、

（1） HTML用サーバ（無料のレンタルサーバでもなんでもいいです）
（2） Twitter_developerへのアカウント/アプリ登録
（3） OAuth.ioのアカウント登録/アプリ登録
（4） oauth.js（OAuth認証用のもの）/ sha1.js
（5） oauth.js（OAuth.io用のもの）
（6） jquery-3.2.1.min.js
補足：
手順4と5の oauth.js のライブラリの定義名がかぶるため
そのままでは実行できません。
手順4の oauth.js 内に書かれている "OAuth" を
一括で "OAuth1" に置換してください。

という記述があるので、Oauth1に変更したものを配布しておきます


元がオープンソースなので、権利問題は多分大丈夫・・・・なはず。

改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
posted with カエレバ
山田 祥寛 技術評論社 2016-09-30

Oauth.ioに登録する

とりあえず Oauth.ioに登録します。

まずはTwitterアプリ登録から

にアクセスして登録。

ちなみに2018.08.05現在
開発者への登録が必要みたい

さて、登録が終わったら
oauth.ioに登録

アカウント登録が終わったら

左側のIntefrated APIsをクリック
右上のAdd APIsをクリック

今回はTwitterなので
Twitterを選びます

左側に
client_id , client_secret
を入力するところがあるので
TwitterAPPの画面からコピペして入力

client_id ＝ Consumer Key
client_secret ＝ Consumer Secret

になっています。
右側に使うためにしなきゃいけないことが書いてあります。

How to configure a client app on Twitter
You need to have an account on Twitter to register a new application.
Go on the Twitter developer portal and create a new application.
Set the app's callback URL to https://oauth.io/auth
Don't forget to add oauth.io to the app's whitelist if needed
documentation : https://dev.twitter.com/docs

要するに

・TwitterAPPに登録しろ。
・開発者登録しろ。
・callbackURLに「https://oauth.io/auth」を指定しろ。
・「oauth.io」のホワイトリスト登録を忘れずに。

だそうです。

全部やります。
ホワイトリストはよくわかりませんが、Callbackの設定したらできました。
※後にこのホワイトリストよくわからない問題が重大な問題を引き起こします。


プログラムを書く

まずはページを作成し、左上のボタンの「作成」を「HTML」に変更します。
そしたらそこに

<script type="text/javascript">//<![CDATA[
function twitter_init(){
   OAuth.initialize('Key');
   OAuth.popup('twitter',function(err, res){ //コールバック関数
         //ローカルストレージに保存する方が好ましいと思われる
         localStorage.setItem("oauth_token", res.oauth_token);
         localStorage.setItem("oauth_token_secret", res.oauth_token_secret);
   //以下追加コード
   }).then(function(){ //終了処理
         //コールバック処理(元のアドレスに戻る)
         OAuth.callback('twitter',  "callback/url");
   });
}
//]]></script>

と書きました。
そしてページを表示！

・・・

動かない。
なんで動かないのかよくわからなかったんですが、
JSを実行するトリガーが必要なんじゃないかと思ったので

<input type="button" value="認証" onclick="twitter_init();"/>

を追加。

するとポップアップが表示された！
が、すぐ消えた。
原因不明。
そこで一つ一つ原因を潰していくことにします。

JBL TUNE205BT Bluetoothイヤホン マイクリモコン付き/オープンタイプ ブラック JBLT205BTBLK 【国内正規品/メーカー1年保証付き】
posted with カエレバ
JBL 2018-03-17

解決法

を参考に、

OAuth.initialize("public key");
OAuth.popup("twitter", function(err, res) { /* 処理 */});

のみにするも動かず。

パソコンのブラウザの履歴からアクセスしたリンクを調べてみる。
https://oauth.io/auth/twitter?k=[public key]=https%3A%2F%2Fblog.m86.work%2F&opts=%7B%22state....(以下ステータス

なるほど。。。。
多分、これはちゃんと動いてると思うんですよね。

だから、問題があるとすればおそらく。。。

「ホワイトリストはよくわかりませんが、Callbackの設定したらできました。」
「ホワイトリストはよくわかりませんが、」
「ホワイトリスト」

これだっ！！！



というわけで、Oauth.ioのKeyとかが書いてあるGeneralにホワイトリストの項目がありました。

よく読んでみると

「Other domains won't be able to use this app」
つまり、他のドメインはこのアプリを使えませんってことですね。

そしてその中にはLocalhostしかありません！
（おそらくLocalhostはIntegrated APIsでの認証時に使用するやつ）

ここに、自分のサイトのドメイン突っ込んだら無事動くようになりました。

完成したページ

今後の見通し

このあとツイートしようと試行錯誤したんですけど
varつっこんだらプログラム止まったり
いろいろあったので、またこんど。

ブログ検索

総閲覧数