Code Monkey home page Code Monkey logo

auth0-eccube-plugin's Introduction

Auth0(ソーシャルログイン)プラグイン

Auth0ログインページ

Auth0 を使用して EC-CUBE4でソーシャルログインを実現するプラグインです。
Auth0 を使用するとGoogleやFacebook、Apple、LineなどのアカウントでEC-CUBE4.2にログインできるようになります。  

ご注意!

メールアドレスが取得できるサービスのみ利用可能です。
Twitterは現在メールアドレスを提供していないので利用できません。

非公式プラグインですのでご利用は自己責任でお願いいいたします。
本プラグインを導入したことによる不具合や被った不利益につきましては一切責任を負いません。

インストールに失敗する場合

以下のコマンドをk実行してください。

composer config --no-plugins allow-plugins.php-http/discovery false

Auth0の設定例

Application Login URI、Allowed Callback URLs、Allowed Logout URLsは任意のURLを設定してください。

FireShot Capture 452 - Application Details - manage auth0 com

ソーシャルプロバイダーのClientIDとClientSecretをAuth0に登録

ご注意!

Auth0のClientIDとClientSecretを使用すれば、ソーシャルプロバイダーのClientIDとClientSecretを登録せずにソーシャルログインのテストができます。
本番環境では必ず各ソーシャルプロバイダー独自のClientIDとClientSecretをAuth0に登録してください。

ソーシャルプロバイダーのClientIDとClientSecretの発行方法

ソーシャルプロバイダーに登録するウェブサイトURLとコールバックURLはAuth0で発行されたURLを登録してください。
ウェブサイトURL例:https://a-zumi.us.auth0.com
コールバックURL例:https://a-zumi.us.auth0.com/login/callback

ソーシャルプロバイダーのClientIDとClientSecretをAuth0に登録

発行されたソーシャルプロバイダーのClientIDとClientSecretをAuth0に登録してください。

設定例

インストールと有効化

bin/console eccube:composer:require knpuniversity/oauth2-client-bundle
bin/console eccube:composer:require riskio/oauth2-auth0
bin/console eccube:composer:require auth0/auth0-php

git clone [email protected]:kurozumi/auth0-eccube-plugin.git app/Plugin/Auth0

bin/console eccube:plugin:install --code Auth0
bin/console eccube:plugin:enable --code Auth0

Auth0で発行されたClientIDとClientSecret、DomainをEC-CUBEに登録

Auth0 でClientIdとClientSecret、Domainを取得して、管理画面で設定してください。

Auth0設定画面

ソーシャルログインページへのリンク設定

<a href="{{ url('auth0_connect') }}">ソーシャルログイン</a>

利用可能なソーシャルログイン一覧

利用可能なソーシャルログイン一覧

ユーザー名・パスワード認証停止

ユーザー名・パスワード認証(Username-Password-Authentication)は Auth0 の管理画面で停止してください。

ユーザー名・パスワードログイン停止

ソーシャルログインサービスの追加

Auth0のCustom Social Connectionを利用してYahoo! JAPANと接続する

auth0-eccube-plugin's People

Contributors

kurozumi avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

auth0-eccube-plugin's Issues

Amazonアカウントの連携方法

Amazonアカウントの連携方法

参考URL
https://marketplace.auth0.com/integrations/amazon-social-connection

上記ページのインストールタブをクリックしてください。

Amazon Developerの登録

Amazon Developerの登録をしてください。
https://developer.amazon.com/ja/apps-and-games/login-with-amazon

セキュリティプロファイルの作成

セキュリティプロファイルを新規作成してください。
https://developer.amazon.com/loginwithamazon/console/site/lwa/overview.html

ウェブ設定

セキュリティプロファイルが作成できたらウェブ設定でClient IDとClient Secretを作成してください。

許可されたオリジンにはAuth0で作成されたDomainを登録してください。
例:https://a-zumi.us.auth0.com/

許可された返信URLにはAuth0で作成されたDomainに/login/callbackをつけて登録してください。
例:https://a-zumi.us.auth0.com/login/callback

Auth0の管理画面からAuthentication > Social > amazon設定ページへアクセスして、
AmazonのClient IDとClient Secretを登録してください。

登録する際、Attributes の Email address をチェックしてください。

以上で設定は完了です。

GitHubアカウントの連携方法

GitHubアカウントの連携方法

参考URL
https://marketplace.auth0.com/integrations/github-social-connection

上記ページのインストールタブをクリックしてください。

GitHub の OAuth Appsの作成

参考URL
https://docs.github.com/ja/developers/apps/building-oauth-apps/creating-an-oauth-app

Homepage URLにはAuth0で作成されたDomainを登録してください。
例:https://a-zumi.us.auth0.com

Authorization callback URLにはAuth0で作成されたDomainに/login/callbackをつけて登録してください。
例:https://a-zumi.us.auth0.com/login/callback

GitHubのClient IDとClient SecretをAuth0に登録

Auth0の管理画面からAuthentication > Social > github設定ページへアクセスして、
GitHubのClient IDとClient Secretを登録してください。

登録する際、Attributes の Email address をチェックしてください。

以上で設定は完了です。

LINEアカウントの連携方法

LINEアカウントの連携方法

参考URL
https://marketplace.auth0.com/integrations/line-social-connection

上記ページのインストールタブをクリックしてください。

LINEログインチャンネルの作成

参考URL
https://developers.line.biz/ja/docs/line-login/integrate-line-login/#login-flow

Callback URLにはAuth0で作成されたDomainに/login/callbackをつけて登録してください。
例:https://a-zumi.us.auth0.com/login/callback

メールアドレスの取得権限を申請

EC-CUBEにログインするためにはメールアドレスが必須なので取得権限を申請してください。

LINEログインチャンネルのChannel IDとChannel SecretをAuth0に登録

Auth0の管理画面からAuthentication > Social > line設定ページへアクセスして、
LINEログインチャンネルのChannel IDとChannel Secretを登録してください。

登録する際、Attributes の Email address をチェックしてください。

以上で設定は完了です。

Twitterアカウントはメールアドレスが取得できない

Twitterアカウントはメールアドレスが取得できないので登録できない。
アプリ作成時にメールアドレスを取得できるオプションがあるので取得できるようにしたが、
EC-CUBE側にメールアドレスが渡されなかった。

なにか設定が必要そうなので調査が必要。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.