{"id":1044,"date":"2016-11-25T03:22:54","date_gmt":"2016-11-25T03:22:54","guid":{"rendered":"http:\/\/myprojects.advchaweb.com\/?p=1044"},"modified":"2016-11-26T09:52:16","modified_gmt":"2016-11-26T09:52:16","slug":"laravel-socialite","status":"publish","type":"post","link":"https:\/\/myprojects.advchaweb.com\/index.php\/2016\/11\/25\/laravel-socialite\/","title":{"rendered":"Laravel Socialite"},"content":{"rendered":"

Source: https:\/\/github.com\/laravel\/socialite<\/a><\/p>\n

I want to practice ‘socialite’ app given by Laravel 5.3 documentation<\/a>. Installation:<\/p>\n

    \n
  1. Open hosts file and Add a new domain ‘socialite.app’ at the file\n
    teddy@teddy-K43SJ:~\/Homestead$ sudo gedit \/etc\/hosts<\/pre>\n
    Add this line in the file:<\/p>\n
    192.168.10.10  socialite.app<\/pre>\n<\/li>\n
  2. Edit ‘Homestead.yaml’ file in ~\/.homestead\/ to add the new domain ‘socialite.app’ and set the mapping\n
    ...\r\nsites:\r\n    ...\r\n    - map: socialite.app\r\n      to: \/home\/vagrant\/Code\/socialite\/public\r\n...<\/pre>\n<\/li>\n
  3. Start vagrant with ‘vagrant up’ or if it already started up, refresh it with ‘vagrant provision’ then go into the ssh with ‘vagrant ssh’<\/li>\n
  4. Go into ‘Code’ directory then create a new laravel project ‘socialite’\n
    vagrant@homestead:~$ cd Code\/\r\nvagrant@homestead:~\/Code$ composer create-project --prefer-dist laravel\/laravel socialite\r\nInstalling laravel\/laravel (v5.3.16)\r\n  - Installing laravel\/laravel (v5.3.16)\r\n    Loading from cache\r\n...\r\n> php artisan key:generate\r\nApplication key [base64:KYHaOwFIHGLog5xgPO5v1qjP\/MDMKO9OL6ajTQGdQ4Q=] set successfully.<\/pre>\n<\/li>\n
  5. Test it at our browser with\u00a0http:\/\/socialite.app\/. If the laravel screen is showed up, we are on the right path.<\/li>\n
  6. Go into the new project ‘socialite’ root directory then add a dependency ‘laravel\/socialite’\n
    vagrant@homestead:~\/Code$ cd socialite\/\r\nvagrant@homestead:~\/Code\/socialite$ composer require laravel\/socialite\r\nUsing version ^2.0 for laravel\/socialite\r\n.\/composer.json has been updated\r\nLoading composer repositories with package information\r\nUpdating dependencies (including require-dev)\r\n  - Installing guzzlehttp\/promises (1.3.0)\r\n    Loading from cache\r\n\r\n  - Installing psr\/http-message (1.0.1)\r\n    Loading from cache\r\n\r\n  - Installing guzzlehttp\/psr7 (1.3.1)\r\n    Loading from cache\r\n\r\n  - Installing guzzlehttp\/guzzle (6.2.2)\r\n    Loading from cache\r\n\r\n  - Installing league\/oauth1-client (1.7.0)\r\n    Downloading: 100%         \r\n\r\n  - Installing laravel\/socialite (v2.0.20)\r\n    Downloading: 100%         \r\n\r\nWriting lock file\r\nGenerating autoload files\r\n> Illuminate\\Foundation\\ComposerScripts::postUpdate\r\n> php artisan optimize\r\nGenerating optimized class loader\r\nThe compiled class file has been removed.<\/pre>\n
     <\/li>\n
  7. Configuration
    \nAfter installing the Socialite library, register the Laravel\\Socialite\\SocialiteServiceProvider in your config\/app.php configuration file:<\/p>\n
    ...\r\n'providers' => [\r\n\r\n    ...\r\n    Laravel\\Socialite\\SocialiteServiceProvider::class,\r\n\r\n],\r\n...<\/pre>\n
    Also, add the Socialite facade to the aliases array in your app configuration file:<\/p>\n
    ...\r\n'aliases' => [\r\n\r\n    ...\r\n    'Socialite' => Laravel\\Socialite\\Facades\\Socialite::class,\r\n\r\n],\r\n...<\/pre>\n
     <\/li>\n
  8. You will also need to add credentials for the OAuth services your application utilizes. These credentials should be placed in your config\/services.php configuration file, and should use the key facebook, twitter, linkedin, google, github or bitbucket, depending on the providers your application requires. For example for facebook credentials:\n
    <?php\r\n\r\nreturn [\r\n\r\n    ...\r\n    \r\n    'facebook' => [\r\n        'client_id' => env('FB_APP_ID'),\r\n        'client_secret' => env('FB_APP_SECRET'),\r\n        'redirect' => env('FB_REDIRECT'),\r\n    ],\r\n\r\n];<\/pre>\n
    we will use env file (.env) to store facebook credentials.<\/p>\n
    FB_APP_ID=xxxxxxx\r\nFB_APP_SECRET=xxxxxx\r\nFB_REDIRECT=http:\/\/socialite.app\/auth\/facebook\/callback<\/pre>\n
    SORRY, ONLY ADMIN CAN SHOW THIS!<\/span>
    \nREMEMBER ‘http:\/\/socialite.app\/auth\/facebook\/callback’ IS CALLBACK URL (AFTER THE SUCCESSFUL LOGIN ON FACEBOOK). ALSO IT MUST MATCH WITH ROUTE ‘auth\/facebook\/callback’ IN \/routes\/web.php LATER!<\/li>\n
  9. Basic Usage
    \nNext, you are ready to authenticate users! You will need two routes: one for redirecting the user to the OAuth provider, and another for receiving the callback from the provider after authentication. We will access Socialite using the Socialite facade. Please create a new controller file ‘AuthController.php’ in \/app\/Http\/Controllers\/Auth\/ to work with facebook login:<\/p>\n
    <?php\r\n\r\nnamespace App\\Http\\Controllers\\Auth;\r\n\r\nuse App\\Http\\Controllers\\Controller;\r\nuse Socialite;\r\n\r\nclass AuthController extends Controller\r\n{\r\n    \/**\r\n     * Redirect the user to the GitHub authentication page.\r\n     *\r\n     * @return Response\r\n     *\/\r\n    public function redirectToProvider()\r\n    {\r\n        return Socialite::driver('facebook')->redirect();\r\n    }\r\n\r\n    \/**\r\n     * Obtain the user information from GitHub.\r\n     *\r\n     * @return Response\r\n     *\/\r\n    public function handleProviderCallback()\r\n    {\r\n        $user = Socialite::driver('facebook')->user();\r\n        \/\/var_dump($user);\r\n        \/\/ $user->token;\r\n        $data=array(\r\n            'name'=>$user->name,\r\n            'login_via'=>'Facebook'\r\n        );\r\n        \r\n        return view('home')->with('data',$data); \r\n        \/\/return redirect()->to('\/')->with('data',$data);\r\n    }\r\n}<\/pre>\n
    NOTE: DONT FORGET TO ADD ‘use App\\Http\\Controllers\\Controller;’ BEFORE ‘use Socialite;’ BECAUSE I GOT AN ERROR ABOUT IT!<\/li>\n
  10. Creating Views. Create two new blade files. They are \/resources\/views\/home.blade.php and \/resources\/views\/master.blade.php:
    \nmaster.blade.php:<\/p>\n
    <!doctype html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"_token\" content=\"{{ csrf_token() }}\"\/>\r\n    <title>Social Login<\/title>\r\n    <link href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.5\/css\/bootstrap.min.css\" rel=\"stylesheet\">\r\n    <style>\r\n        body {\r\n            padding-top : 70px;\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"container\">\r\n        @yield('content')\r\n    <\/div>\r\n\r\n    <script src=\"http:\/\/code.jquery.com\/jquery-2.1.4.min.js\"><\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
    home.blade.php:<\/p>\n
    @extends('master')\r\n\r\n@section('content')\r\n    @if(!empty($data))\r\n    <h1>Hello {{$data['name']}}, You logged in via {{ $data['login_via'] }}<\/h1>\r\n    @else\r\n    <div class=\"row\">\r\n        <div class=\"col-md-6 col-md-offset-3\">\r\n            <h2>Login Using Social Sites<\/h2>\r\n            <a class=\"btn btn-primary\" href=\"{{ url('\/auth\/facebook') }}\">Facebook<\/a>\r\n        <\/div>\r\n    <\/div>\r\n    @endif\r\n@stop<\/pre>\n
    url(‘\/auth\/facebook’) would redirect the page to facebookpage!<\/li>\n
  11. Set the routes. Edit \/routes\/web.php like this:\n
    Route::get('\/', function () {\r\n    \/\/return view('welcome');\r\n    return view('home');\r\n});\r\n\r\nRoute::get('auth\/facebook', 'Auth\\AuthController@redirectToProvider');\r\nRoute::get('auth\/facebook\/callback', 'Auth\\AuthController@handleProviderCallback');<\/pre>\n
    We set the root (‘\/’) url would open the home page (home.blade.php)<\/li>\n
  12. Test it! http:\/\/socialite.app\/
    \nHere is the screen\"socialite-home\"<\/a>If we click ‘Facebook’ link, it would redirect us to facebook page. The url would be like this:\u00a0https:\/\/www.facebook.com\/v2.8\/dialog\/oauth?client_id=166568033366882&redirect_uri=http%3A%2F%2Fsocialite.app&scope=email&response_type=code&state=es6ub834Woh7xDxTvdqru84U7kwiRJkftD83HFz7
    \nIf I get this page    \"socialite-fb-page\"<\/a> Then I need to modify my facebook app to add this domain (http:\/\/socialite.app\/) at ‘Site URL’ box. To do it, Open your app from https:\/\/developers.facebook.com\/apps, then Click your app. Then at Settings->Basic->at Site Url fill with this domain name: http:\/\/socialite.app\/. Then Save and fix any error.
    \nSORRY, ONLY ADMIN CAN SHOW THIS!<\/span>
    \nHere is the oauth2 output from facebook for successful login:
    \nSORRY, ONLY ADMIN CAN SHOW THIS!<\/span>
    \nHere is the callback result the successful facebook login    \"socialite-fb-callback\"<\/a><\/li>\n
  13. How to add the others social links (twitter, github, google plus and linkedin)?
    \nPlease read Complete     Laravel 5 Socialite tutorial<\/a> to find out how to do it.
    \nYou need to setup your apps for the above social app to get the credentials like Client ID and Client Secret and the redirect URL.
    \nTo setup Google+ app, please read     Google APIs<\/a>
    \nTo setup twitter app, please read     Twitter Socialite App<\/a>
    \nTo setup github app, please read     Github App<\/a>
    \nTo setup linkedin app, please read     Linkedin Oauth2 App<\/a>
    \nThen modify .env file to include above credentials:
    \nSORRY, ONLY ADMIN CAN SHOW THIS!<\/span><\/li>\n
  14. Here I want to make the redirect URL to be uniform like this:\n
    FB_APP_ID=XXX\r\nFB_APP_SECRET=XXX\r\nFB_REDIRECT=http:\/\/socialite.app\/social\/login\/facebook\r\n\r\nGOOGLE_APP_ID=XXX\r\nGOOGLE_APP_SECRET=XXX\r\nGOOGLE_REDIRECT=http:\/\/socialite.app\/social\/login\/google\r\n\r\nTWITTER_APP_ID=XXX\r\nTWITTER_APP_SECRET=XXX\r\nTWITTER_REDIRECT=http:\/\/socialite.app\/social\/login\/twitter\r\n\r\nGITHUB_APP_ID=XXX\r\nGITHUB_APP_SECRET=XXX\r\nGITHUB_REDIRECT=http:\/\/socialite.app\/social\/login\/github\r\n\r\nLINKEDIN_APP_ID=XXX\r\nLINKEDIN_APP_SECRET=XXX\r\nLINKEDIN_REDIRECT=http:\/\/socialite.app\/social\/login\/linkedin<\/pre>\n
    So modify our social routes in \/routes\/web.app like this:<\/p>\n
    Route::get('social\/login\/redirect\/{provider}', ['uses' => 'Auth\\AuthController@redirectToProvider', 'as' => 'social.login']);\r\nRoute::get('social\/login\/{provider}', 'Auth\\AuthController@handleProviderCallback');<\/pre>\n
     <\/li>\n
  15. Modify \/config\/services.php to get all the credentials from .env file\n
    <?php\r\n\r\nreturn [\r\n\r\n    ...\r\n    \r\n    'facebook' => [\r\n        'client_id' => env('FB_APP_ID'),\r\n        'client_secret' => env('FB_APP_SECRET'),\r\n        'redirect' => env('FB_REDIRECT'),\r\n    ],\r\n    \r\n    'twitter' => [\r\n        'client_id' => env('TWITTER_APP_ID'),\r\n        'client_secret' => env('TWITTER_APP_SECRET'),\r\n        'redirect' => env('TWITTER_REDIRECT'),\r\n    ],\r\n    \r\n    'google' => [\r\n        'client_id' => env('GOOGLE_APP_ID'),\r\n        'client_secret' => env('GOOGLE_APP_SECRET'),\r\n        'redirect' => env('GOOGLE_REDIRECT'),\r\n    ],\r\n    \r\n    'github' => [\r\n        'client_id' => env('GITHUB_APP_ID'),\r\n        'client_secret' => env('GITHUB_APP_SECRET'),\r\n        'redirect' => env('GITHUB_REDIRECT'),\r\n    ],\r\n    \r\n    'linkedin' => [\r\n        'client_id' => env('LINKEDIN_APP_ID'),\r\n        'client_secret' => env('LINKEDIN_APP_SECRET'),\r\n        'redirect' => env('LINKEDIN_REDIRECT'),\r\n    ],\r\n\r\n];\r\n<\/pre>\n
     <\/li>\n
  16. Modify \/resources\/views\/home.blade.php to include all the social app\n
    @extends('master')\r\n\r\n@section('content')\r\n    @if(!empty($data))\r\n    <h1>Hello {{$data['name']}}, You logged in via {{ $data['login_via'] }}<\/h1>\r\n    @else\r\n    <div class=\"row\">\r\n        <div class=\"col-md-6 col-md-offset-3\">\r\n            <h2>Login Using Social Sites<\/h2>\r\n            <a class=\"btn btn-primary\" href=\"{{ route('social.login','facebook') }}\">Facebook<\/a>\r\n            <a class=\"btn btn-primary\" href=\"{{ route('social.login','twitter') }}\">Twitter<\/a>\r\n            <a class=\"btn btn-primary\" href=\"{{ route('social.login','google') }}\">Google+<\/a>\r\n            <a class=\"btn btn-primary\" href=\"{{ route('social.login','github') }}\">Github<\/a>\r\n            <a class=\"btn btn-primary\" href=\"{{ route('social.login','linkedin') }}\">Linkedin<\/a>\r\n        <\/div>\r\n    <\/div>\r\n    @endif\r\n@stop<\/pre>\n<\/li>\n
  17. Modify \/app\/Http\/Controllers\/Auth\/AuthController.php to add a parameter $provider\n
    ...\r\n\r\nclass AuthController extends Controller\r\n{\r\n    public function redirectToProvider($provider)\r\n    {\r\n        return Socialite::driver($provider)->redirect();\r\n    }\r\n\r\n    public function handleProviderCallback($provider)\r\n    {\r\n        $user = Socialite::driver($provider)->user();\r\n        $data=array(\r\n            'name'=>$user->name,\r\n            'login_via'=>$provider\r\n        );\r\n        \r\n        return view('home')->with('data',$data); \r\n    }\r\n}<\/pre>\n<\/li>\n
  18. Run on your browser\"socialite-home-muti\"<\/a>Login via Facebook<\/span> RUN WELL LIKE BEFORE!
    \nLogin via Twitter<\/span>, For the first time we are needed to authorize the application    \"socialite-twitter-autorize\"<\/a>Click ‘Authorize app’. If nothing wrong, here is the callback result\"socialite-twitter-callback\"<\/a>SORRY, ONLY ADMIN CAN SHOW THIS!<\/span>
    \nLogin via Google<\/span>, For the first time we are needed to authorize the application    \"socialite-google-autorize\"<\/a>Click ‘Izinkan’. If nothing wrong, here is the callback result\"socialite-google-callback\"<\/a> SORRY, ONLY ADMIN CAN SHOW THIS!<\/span>
    \nLogin via Github<\/span>, For the first time we are needed to authorize the application    \"socialite-github-autorize\"<\/a>Click ‘Authorize application’. If nothing wrong, here is the callback result\"socialite-github-callback\"<\/a>SORRY, ONLY ADMIN CAN SHOW THIS!<\/span>
    \nLogin via Linkedin<\/span>, For the first time we are needed to authorize the application    \"socialite-linkedin-autorize\"<\/a>Click ‘Allow’. If nothing wrong, here is the callback result\"socialite-linkedin-callback\"<\/a>SORRY, ONLY ADMIN CAN SHOW THIS!<\/span><\/li>\n
  19. OKAY! EVERYTHING RUN WELL. THE NEXT STEP IS TO USE DATABASE\/SESSION TO SAVE THE LOGIN INFORMATION!
    \nFor this, please read :     Laravel 5.2 Socialite Facebook Login<\/a> and Using Github authentication for login with Laravel Socialite<\/a>.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"
    Source: https:\/\/github.com\/laravel\/socialite I want to practice ‘socialite’ app given by Laravel 5.3 documentation. Installation: Open hosts file and Add a new domain ‘socialite.app’ at the file teddy@teddy-K43SJ:~\/Homestead$ sudo gedit \/etc\/hosts Add this line in the file: 192.168.10.10 socialite.app Edit ‘Homestead.yaml’ file in ~\/.homestead\/ to add the new domain ‘socialite.app’ and set the mapping … sites: … Continue reading “Laravel Socialite”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[14,13],"tags":[],"class_list":["post-1044","post","type-post","status-publish","format-standard","hentry","category-laravel","category-tutorial"],"_links":{"self":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/1044","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/comments?post=1044"}],"version-history":[{"count":24,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/1044\/revisions"}],"predecessor-version":[{"id":1130,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/posts\/1044\/revisions\/1130"}],"wp:attachment":[{"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/media?parent=1044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/categories?post=1044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/myprojects.advchaweb.com\/index.php\/wp-json\/wp\/v2\/tags?post=1044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}