よく使う外部サービス連携。key, secret取得の備忘録

Web開発をしていると、facebookやtwiiter、google、instagramからAPI呼び出しをする機会は避けて通れません。
呼び出す為には、開発者登録を行い、key,secretを発行しアプリケーションに組み込む必要があります。
これらは一つ一つ場所が違っているし、毎回「助けてGoogle先生 ~ 」と泣きつくので、この機会に備忘録として記載したいと思います。
同じ境遇の人の少しでも手助けになれば幸いです。

※1 2018年1月時点のものです。(ずっと下書きのままだった)
※2 状況により異なるため、アプリケーションへの実装までは載せていません。
※3 私が必要だったもので、設定するプロダクトや設定は各人異なるケースがあります。

対象一覧

• Facebook
• Twiiter
• Instagram 未記入
• google tag manager 未記入
• google maps
• google analytics api 未記入
• recaptcha

Facebook

何のため

Facebookのアプリとの連携、APIのために使用。よく使うのはFacebook Login

必要なもの

• Facebook アカウント
• WebサイトのURL

手順

URL: 開発者コンソール
1. 対象のFacebook アカウントでログイン
2. マイアプリ > 新しいアプリをクリック
3. 新しいアプリIDを作成
4. 製品を追加 > 今回はFacebook ログイン (ドキュメントに従い設置)
5. ダッシュボードからアプリID、app secretを取得

Twiiter

何のために

Twitter ログイン

必要なもの

• twitter アカウント
• WebサイトのURL

手順

URL: Application Management
0. 電話番号紐付けがまだならやっておく(http://phiary.me/twitter-api-key-no-japanese/) 一回これでめっちゃ嵌った。。。
1. Create New App
2. 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が変わってます。辛い...
1. プロジェクトを作成(なければ)
2. 左の認証情報 > 認証情報を作成 > OAuth クライアント ID

Google Map Api

何のために

Webサイトに地図を表示するため

必要なもの

• Google アカウント
• WebサイトのURL

手順

URL: 「Google Cloud Platform」(https://developers.google.com/maps/?hl=ja)
1. プロジェクトを作成(なければ)
2. 左のAPIとサービスをクリック
3. ライブラリ > Google Maps Javascript APIから有効にする
4. 認証情報から取得

注意

1日の上限は25000回で、それ以上は有料

reCAPTCHA

何のために

ユーザー認証を攻撃から守るために使用する。デファクトスタンダートだと思ってる。よくある、「ロボットではありません」のアレ

必要なもの

• Google アカウント
• WebサイトのURL

手順

URL: Googleの公式
1. 右上の「Get reCAPTCHA」をクリック
2. 「Register a new site」 のLabel(わかりやすい名前)。Choose the type of reCAPTCHAはInvisible reCAPTCHA」。Domain(Webサイトのドメイン。テストなら127.0.0.1とかlocalhostとか。ポートは不要)。
3.Site keyとSecret keyを取得