Clipkit® Support

Clipkitに関する情報・よくあるご質問は
こちらでご確認いただけます。

その他

2017.01.25公開
2020.06.06更新

SNSアカウント・ログイン機能を有効にする

Facebook、Twitter、LINE、Google、Yahoo! Japanのアカウントによるログイン機能を有効にする方法について解説します。

Facebook

Facebook for Developers

https://developers.facebook.com

上記サイトにWEBサイトを登録して、App ID、App Secretの値を取得してください。 下記の設定をしてください。

(1)「設定」→「プラットフォームを追加」→「ウェブサイト」を選択→「サイトURL」を入力→「変更を保存」

(2)「設定」→ベーシックアプリドメインにご利用のドメインを入力

(3)「Facebookログイン」→「設定」の有効なOAuthリダイレクトURIに下記URLを入力

https://ドメイン名/users/auth/facebook/callback

(2)「アプリレビュー」→「〇〇〇を公開しますか?」→「はい」

次に、Clipkitのサイト管理→サイト設定→ソーシャルログインで下記の項目を設定して保存してください。

項目名
enable_login_facebook true
facebook_app_id Facebook App IDの値
facebook_app_secret Facebook App Secretの値

Twitter

Twitter Developers

https://apps.twitter.com/

上記サイト(Twitter Apps)にWEBサイトを登録して、Consumer Key (API Key)、Consumer Secret (API Secret)の値を取得してください。下記の設定をしてください。

(1)事前にTwitterのアカウント設定でモバイルを登録する

(2)上記サイトで「My Apps」→「Create New App」

(3)Name、Description、Website、Callback URLを入力する

https://ドメイン名/users/auth/twitter/callback

次に、Clipkitのサイト管理→サイト設定→ソーシャルログインで下記の項目を設定して保存してください。

項目名
twitter_api_key Consumer Key (API Key)の値
twitter_api_secret Consumer Secret (API Secret)の値

LINE ID

LINE developers

https://developers.line.me

(1)上記サイトにWEBサイトを登録してください。

登録時の注意点

  • SELECT LANGUAGEにて、Japaneseを選択し、ADD NAME AND DESCRIPTION にて追加
  • Application type : WEBにチェック

(2)Technical configurationから、CallBacKUrlを設定してください。

CallBackのパス : /users/auth/line/callback

設定例)https://sample.com/users/auth/line/callback

(3)Channel ID、Channel Secretの値を取得してください。

次に、Clipkitのサイト管理→サイト設定→ソーシャルログインで下記の項目を設定して保存してください。

項目
line_channel_id LINE Channel IDの値
line_channel_secret LINE Channel Secretの値

Google

Google Developers Console

https://console.developers.google.com/project

上記サイトにWEBサイトを登録して、クライアントID、クライアントシークレットの値を取得してください。手順は下記の通りです。

(1)「プロジェクトを作成」で新しいプロジェクトを作成する

(2)メニュー「認証情報」→「OAauthクライアントID」を選択する

(3)「同意画面を設定」→「ユーザーに表示するサービス名」を入力→保存する

(4)「ウェブアプリケーション」を選択する

(5)「承認済みのJavaScript生成元」にWEBサイトのURLを入力する

(6)「承認済みのリダイレクトURI」にWEBサイトのURLに「/users/auth/google_oauth2/callback」を付けて入力

  【例】https://example.com/users/auth/google_oauth2/callback

(7)保存するとクライアントID、クライアントシークレットが生成される

(8)メニュー「ライブラリ」→「Google+ API」を選択する

(9)「有効にする」をクリックする

次に、Clipkitのサイト管理→サイト設定→ソーシャルログインで下記の項目を設定して保存してください。

項目
google_client_id クライアントIDの値
google_client_secret クライアントシークレットの値

Yahoo! Japan ID

Yahoo! Japanデベロッパーネットワーク・アプリケーション管理

https://e.developer.yahoo.co.jp/register

上記サイトにWEBサイトをアプリケーション登録して、App ID、App Secretの値を取得してください。

次に、Clipkitのサイト管理→サイト設定→ソーシャルログインで下記の項目を設定して保存してください。

項目
yahoojp_app_id Yahoo App IDの値
yahoojp_app_secret Yahoo App Secretの値

Instagram

(1)開発者ページでログイン
https://www.instagram.com/developer/

(2)[ Register Your Application ]を押してサインアップ画面へ

(3)WebサイトのURL、電話番号、利用目的を記入してSign Up

(4)[ Register a New Client ]を押して新しいアプリ登録画面へ

(5)アプリ名、説明、URL、アプリ認証用プログラムURLを記入しRegisterを押す

(6)出来上がったアプリケーションの[ MANAGE ]ボタンを押します

(7)[ CLIENT ID ]、[ CLIENT SECRET ]が表示されます

(8)下記のURLのXXXXXにCLIENT_ID、YYYYYにREDIRECT_URIを入れてアクセスします。アクセストークン取得。
https://www.instagram.com/oauth/authorize/?client_id=XXXXX&redirect_uri=YYYYY&response_type=token

※取得に失敗したら「MANAGE」ボタン→「Security」タブ→「Disable implicit OAuth」のチェックを外して再度アクセス
(9)認証画面が表示されたら[ Authorize ]を押します。
URLのACCESS_TOKENというパラメーターがアクセストークン

(10)Clipkitのサイト管理→サイト設定→ソーシャルログインで下記の項目を設定して保存してください。
項目          値
enable_login_instagram
instagram_client_id CLIENT_ID
instagram_client_secret CLIENT_SECRET

会社概要

会社名 株式会社スマートメディア
会社所在地 東京都港区南青山2-13-10
ユニマットアネックスビル3F
役員 代表取締役社長 成井 五久実
(なるい いくみ)
資本金 5,100,000円
事業内容 テクノロジーを活用したメディア事業