よく使う外部サービス連携。key, secret取得の備忘録
Web開発をしていると、facebookやtwiiter、google、instagramからAPI呼び出しをする機会は避けて通れません。
呼び出す為には、開発者登録を行い、key,secretを発行しアプリケーションに組み込む必要があります。
これらは一つ一つ場所が違っているし、毎回「助けてGoogle先生 ~ 」と泣きつくので、この機会に備忘録として記載したいと思います。
同じ境遇の人の少しでも手助けになれば幸いです。
※1 2018年1月時点のものです。(ずっと下書きのままだった)
※2 状況により異なるため、アプリケーションへの実装までは載せていません。
※3 私が必要だったもので、設定するプロダクトや設定は各人異なるケースがあります。
対象一覧
- Twiiter
-
Instagram未記入 -
google tag manager未記入 - google maps
-
google analytics api未記入 - recaptcha
何のため
Facebookのアプリとの連携、APIのために使用。よく使うのはFacebook Login
必要なもの
- Facebook アカウント
- WebサイトのURL
手順
URL: 開発者コンソール
- 対象のFacebook アカウントでログイン
- マイアプリ > 新しいアプリをクリック
- 新しいアプリIDを作成
- 製品を追加 > 今回はFacebook ログイン (ドキュメントに従い設置)
- ダッシュボードからアプリID、app secretを取得
Twiiter
何のために
Twitter ログイン
必要なもの
- twitter アカウント
- WebサイトのURL
手順
URL: Application Management
0. 電話番号紐付けがまだならやっておく(http://phiary.me/twitter-api-key-no-japanese/) 一回これでめっちゃ嵌った。。。
- Create New App
- Name(何でもいい)。Description(何でもいい)。WebSite(何でもいい)。Callback URL(重要：指定されているコールバック先)
Google OAuth Login
何のため
Google Loginをするため
必要なもの
- Google アカウント
- WebサイトのURL
手順
URL: 「Google Cloud Platform」(https://developers.google.com/maps/?hl=ja)
google様。アクセスするたびUIが変わってます。辛い...
- プロジェクトを作成(なければ)
- 左の認証情報 > 認証情報を作成 > OAuth クライアント ID
Google Map Api
何のために
Webサイトに地図を表示するため
必要なもの
- Google アカウント
- WebサイトのURL
手順
URL: 「Google Cloud Platform」(https://developers.google.com/maps/?hl=ja)
- プロジェクトを作成(なければ)
- 左のAPIとサービスをクリック
- ライブラリ > Google Maps Javascript APIから有効にする
- 認証情報から取得
注意
1日の上限は25000回で、それ以上は有料
reCAPTCHA
何のために
ユーザー認証を攻撃から守るために使用する。デファクトスタンダートだと思ってる。よくある、「ロボットではありません」のアレ
必要なもの
- Google アカウント
- WebサイトのURL
手順
URL: Googleの公式
- 右上の「Get reCAPTCHA」をクリック
- 「Register a new site」 のLabel(わかりやすい名前)。Choose the type of reCAPTCHAはInvisible reCAPTCHA」。Domain(Webサイトのドメイン。テストなら127.0.0.1とかlocalhostとか。ポートは不要)。
3.Site keyとSecret keyを取得