Laravel makes it almost a trvial task of enabling your application to provide OAuth2 authentication. For the most part this mainly involves installing and configuring Laravel Passport in your application.
In this article, we'll provide a guide on how to implement and use this great Laravel package to create your own OAuth2 server. This article continues to build on the project we started in building a VUE SPA with laravel and Material Component Framework with Laravel and Vue.
What is OAuth?
OAuth is an open standard for authorization which provides the freedom for anyone to implement. OAuth provides a standard that applications can use to provide client applications with secure delegated access over HTTPS to provide authorized devices, APIs, servers, and applications with access tokens rather than credentials.
There are two distinct versions of OAuth: namely OAuth 1.0a and OAuth 2.0. The specifications are completely different from one another, and cannot be used together: there is no backwards compatibility between them.
OAuth2 is the most widely used and popular of the OAuth standards and probably most confusingly when people refer to OAuth in most cases they are actually referring to the OAuth 2.0 standard.
OAuth was created in a response to the direct authentication pattern. This pattern was made famous by HTTP Basic Authentication, where the user is prompted for a username and password is a primitive form of API authentication for server-side applications. Sites implementing Basic Authentication would prompt a user to enter their username and password directly into a form and they would login to your data. Once the user is identified and authorized for access the user details are often stored in a HTTP Cookie and stored within the user Browser and subsequently resent on every request the user makes. This approach is not only cumbersome but it is also poses a number of security vulnerablities
OAuth is a delegated authorization framework for REST/APIs. It enables applications to obtain limited access (scopes) to a userâ€™s data without giving away a userâ€™s password. It decouples authentication from authorization and supports multiple use cases addressing different device capabilities.
OAuth2 works by delegating user authentication to the service that hosts the user account, and authorizing third-party applications to access the user account.
Implementing OAuth2 with Laravel
Laravel makes it fairly easy to implement the OAuth2 but it still requires some configuration and integration. We will also need to make use of the out of the box full featured Laravel User model and authentication system.
A default Laravel application will by default already contain a User Table migration and User Model. If we take a quick look at
database/migrations/2014_10_12_000000_create_users_table.php which is the User Table definition
Typically I don't change any details to this table, I know other developers tend to add additional columns to store more information about the user. I prefer not to do this and if I need to add additional information will rather create an additional table and Model. We will also leave the default User model untouched.
This will suffice for our purpose all we need to do now is add Passport to our application and to do so we simply use the Laravel terminal commands.
This will install the Laravel Passport composer package to our Laravel application, now if you are using Laravel 5.5 or higher then that is all you need to do to configure Laravel Passport.
We now need to run the migration that will create all the required database tables that Laravel Passport will need. To do this run:
Once complete then we can install passport and generate an encryption key. This encryption key will let passport securely generate access tokens. The command will also create a personal access client and a password client for us.
If you are using Homestead then you will need to SSH into your Vagrant box to run these commands. To do so you should use
vagrant ssh from your project root directory then once you have logged into your vagrant machine change directory into your project directory i.e.
We now need to add the
Laravel\Passport\HasApiTokens trait to the
App\User model. This trait will provide some helper methods which allow you to inspect the authenticated userâ€™s token and scopes:
AuthServiceProvider and inside the
register method of the class make a call to
Now, to the last part of configuring Laravel Passport. Open the
./config/auth.php file. Set the
driver option of the
api authentication guard to â€œpassportâ€. This will make sure your application uses Passportâ€™s
TokenGuard while authenticating incoming API requests:
We need to edit
app/Http/Kernel.php to include the line highlighted.
We have finished configuring Laravel Passport and we are ready to start using it in our application.
Adding User Interface for managing OAuth clients and tokens
We now need to create some component views that we will use to manage our tokens. Fortunately, Laravel Passport makes this really easy for us to do so!
If you have previously logged into vagrant box via SSH, should now exit to get back to the project root directory in your terminal window to run the following command
This command will publish some Vue components fro plug-and-play usage to
We now need to add these views to our
We register the Vue components published using the artisan vendor publish command and make them available throughout our application. We can now simply run
yarn install or
npm install and
yarn watch to have our code activated.
Create Login Screens
Lets now create a login screen to be able to login into our application, to do so we'll create a Login View page so using the terminal create a new vue component.
We will create a simple login screen, I will be making use of MDB Vue : A Material Design Component for Vue Pro is which is a Material Component Framework for Laravel and Vue so the mark up is dependent on that but should be fairly straight forward to understand