. Giới thiệu
- Xin chào mọi người hôm nay mình có lang thang và tìm hiểu về cái login bằng google . Bài viết này cũng là mình ghi nhớ lại những gì mình đã làm được và hy vọng bài viết này có ích với các bạn . Mình bắt tay vào luôn nhé .
Step 1 Install Laravel
- Via Composer Create-Project composer create-project –prefer-dist laravel/laravel blog ở đây chúng ta dùng bản laravel mới nhất 7.x nhé
. - php artisan key:generate
- php artisan serve
- php artisan make:auth sử dụng auth của laravel luôn .
.Step 2 Migration DB
- php artisan make:migration add_socialite_fields_to_users_table
- Ở đây ta nên tạo mới 1 migration và add thêm các field vào bảng user nhé /
1 2 3 4 5 6 7 8 9 10 | <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">up</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> Schema<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">table</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'users'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>Blueprint <span class="token variable">$table</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token variable">$table</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">string</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'provider_name'</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">nullable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">after</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'id'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$table</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">string</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'provider_id'</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">nullable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">after</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'provider_name'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$table</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">string</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'password'</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">nullable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">change</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$table</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">string</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'avatar'</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">nullable</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
- Tiếp theo ta thay đổi 1 chút trong Model User nhé
1 2 3 4 | <span class="token keyword">protected</span> <span class="token variable">$hidden</span> <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'provider_name'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'provider_id'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'password'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'remember_token'</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> |
- Mình thêm provider_name và provider_id vào $hidden vì mình không muốn trả lại chúng khi chuyển thể hiện mô hình dưới dạng mảng hoặc JSON do các vấn đề bảo mật .
Step 3. Install/Configure Laravel Socialite
install package Socialite về nhé
- composer require laravel/socialite.
2 . Tiếp theo là thêm
1 2 3 4 5 6 | <span class="token single-quoted-string string">'socialite'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'drivers'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'google'</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> |
trong config/auth.php
3. giờ ta đên config/services.php và ném chỗ này vào
1 2 3 4 5 6 | <span class="token single-quoted-string string">'google'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">[</span> <span class="token single-quoted-string string">'client_id'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">env</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'GOOGLE_CLIENT_ID'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'client_secret'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">env</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'GOOGLE_CLIENT_SECRET'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'redirect'</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token function">env</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'GOOGLE_REDIRECT'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> |
- Tiếp đến là file . env
1 2 3 4 | GOOGLE_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com GOOGLE_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXXXXXX GOOGLE_REDIRECT=http://yourdomain.com/google/callback |
Về phần tạo webaplication trên gg console các bạn có thể tham khảo tại đây nhé .
Step 4. Button with Redirect to Google
Trong app/Http/Controllers/Auth/LoginController.php ta xử lý như sau:
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token keyword">use</span> <span class="token package">Socialite</span><span class="token punctuation">;</span> <span class="token comment">/** * Redirect the user to the provider authentication page. * * @return IlluminateHttpResponse */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">redirectToProvider</span><span class="token punctuation">(</span><span class="token variable">$driver</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> Socialite<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">driver</span><span class="token punctuation">(</span><span class="token variable">$driver</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">redirect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
Tiếp đến ta thêm route :
1 2 3 4 | Route<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'redirect/{driver}'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'Auth<a href="/cdn-cgi/l/email-protection" class="__cf_email__">[email protected]</a>'</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">name</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'login.provider'</span><span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span><span class="token function">where</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'driver'</span><span class="token punctuation">,</span> <span class="token function">implode</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'|'</span><span class="token punctuation">,</span> <span class="token function">config</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'auth.socialite.drivers'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
- Cuối cùng ta add thêm 1 thẻ :
1 2 3 | <span class="token operator"><</span>a href<span class="token operator">=</span><span class="token double-quoted-string string">"{{ route('login.provider', 'google') }}"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token double-quoted-string string">"btn btn-secondary"</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token function">__</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'Google Sign in'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span> |
Step 5. Callback to Create User
- Khi bạn nhấp vào nút Google Sign in và cấp quyền cho tài khoản Google của bạn với tư cách là người dùng, Google sẽ chuyển hướng bạn trở lại cái gọi là URL callback ( hãy nhớ, mình đã cung cấp nó trong .env trong Bước 3 ở trên ). Bây giờ là lúc để thực sự thực hiện nó nhé .
- Ở bước này,đang tạo một người dùng mới với thông tin đăng nhập Google .
- Ta thêm nó vào LoginController.php nhé mình sẽ giải thích ngay ở dưới :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <span class="token keyword">use</span> <span class="token package">App<span class="token punctuation"></span>User</span><span class="token punctuation">;</span> <span class="token comment">/** * @return IlluminateHttpResponse */</span> <span class="token keyword">public</span> <span class="token keyword">function</span> <span class="token function">handleProviderCallback</span><span class="token punctuation">(</span><span class="token variable">$driver</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">try</span> <span class="token punctuation">{</span> <span class="token variable">$user</span> <span class="token operator">=</span> Socialite<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">driver</span><span class="token punctuation">(</span><span class="token variable">$driver</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">user</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span><span class="token class-name"><span class="token punctuation"></span>Exception</span> <span class="token variable">$e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token function">redirect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">route</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'login'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token variable">$existingUser</span> <span class="token operator">=</span> User<span class="token punctuation">:</span><span class="token punctuation">:</span><span class="token function">where</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'email'</span><span class="token punctuation">,</span> <span class="token variable">$user</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">getEmail</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">first</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token variable">$existingUser</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">auth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">login</span><span class="token punctuation">(</span><span class="token variable">$existingUser</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token variable">$newUser</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">User</span><span class="token punctuation">;</span> <span class="token variable">$newUser</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">provider_name</span> <span class="token operator">=</span> <span class="token variable">$driver</span><span class="token punctuation">;</span> <span class="token variable">$newUser</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">provider_id</span> <span class="token operator">=</span> <span class="token variable">$user</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">getId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$newUser</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">name</span> <span class="token operator">=</span> <span class="token variable">$user</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">getName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$newUser</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">email</span> <span class="token operator">=</span> <span class="token variable">$user</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">getEmail</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$newUser</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">email_verified_at</span> <span class="token operator">=</span> <span class="token function">now</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$newUser</span><span class="token operator">-</span><span class="token operator">></span><span class="token property">avatar</span> <span class="token operator">=</span> <span class="token variable">$user</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">getAvatar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token variable">$newUser</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">save</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">auth</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">login</span><span class="token punctuation">(</span><span class="token variable">$newUser</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">return</span> <span class="token function">redirect</span><span class="token punctuation">(</span><span class="token variable">$this</span><span class="token operator">-</span><span class="token operator">></span><span class="token function">redirectPath</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> |
- Ta nhận được người dùng từ Socialite, nếu thất bại – chúng tôi chuyển hướng về đăng nhập;
- Kiểm tra xem người dùng xem email tồn tại chưa , nếu tồn tại rồi thì login thôi ;
- Nếu đó là người dùng mới – ta đăng ký họ và đăng nhập luôn;
- Cuối cùng chuyển hướng đến trang chủ đã đăng nhập, như hành động Đăng nhập thông thường .
Kết thúc
- Hy vọng bài viết đem lại cho các bạn nhiều điều hay ho . Có gì thắc mắc thì các bạn hãy comment ở dưới nhé . Và đừng quên upvote để mình có động lực với những bài tiếp theo nhé . thanks for read .