Learn how to add social authentication to your site using services such as Facebook, Twitter, or Google.
- [Narrator] Hello. We are now at the last video of this section, Adding Social Authentication to Your Site. In the previous video, we've learned how to build authentication in your site. In this video, we'll learn how to add social authentication to your site. You might also want to add social authentication to your site using services such as Facebook, Twitter or Google. Python Social Auth is a Python module that simplifies the process of adding social authentication to your website. By using this module, you can let your users log into your website using their account of other services.
You can find the code of this module at this site. This module comes with authentication backends for different Python frameworks, including Django. To install the package via pip, open the console and run this command. Then add social.apps.django_app.default to the installed apps setting in the settings.py file of your project. This is the default application to add Python's social auth to Django projects.
Now run this command to sync Python Social Auth modules with your database. You should see that the migrations for the default application are applied as this code. Python Social Auth includes backends for multiple services. You can see a list of all backends at this site. We're going to include authentication backends for Facebook, Twitter and Google. You need to add social login URL patterns to your project. Open the main urls.py file of the Bookmarks project and add this URL pattern to it.
In order to make social authentication work, you'll need a host name because several services will not allow redirecting to localhost. This will tell your computer to point the mysite.com hostname to your own machine. If you're using Windows, your hosts file is located at. Edit your hosts file and add this highlighted line to it. To verify that your host redirection worked, open the localhost in your browser. If you see the login page of your application, everything was done correctly.
Authentication using Facebook. In order to let your users log in with their Facebook account to your site, add the highlighted line to the authentication backend setting in the settings.py file of your project. In order to add social authentication with Facebook, you need a Facebook developer account, and you have to create a new Facebook application. Open this site in your browser and click on the add new app button. And enter bookmarks for your app name. Follow the quick start and click on Create App ID.
Go to the Dashboard of your site, you'll see something similar to this. Copy the app ID and app secret key. And add them to the settings.py file of your project as follows. Open this site in your browser. Click on Website platform. And enter bookmarks for your app name. When asked, enter this localhost as your site URL.
Finally, open your registration login.html template and append this code to the content block. Open the localhost in your browser. Now your login page will look the same as in this screen. Click the Login with Facebook button. You'll be redirected to Facebook and you'll see a modal dialogue asking for your permission to let the bookmarks application access your public Facebook profile. Click the Okay button. Python Social Auth handles the authentication.
If everything goes well, you'll be logged in and redirected to the dashboard page of your site. Remember that we have used this URL in the login redirect URL setting. As you can see, adding social authentication to your site is pretty straightforward. Authentication using Twitter. For social authentication using Twitter, add the following line to the authentication backend setting in the settings.py file of your project. You do need to create a new application in your Twitter account.
Open this site in your browser and enter the details of your application, including these settings. For Website, use the localhost link. For Callback URL, you can use the localhost link. Make sure you mark the checkbox allow this application to be used to sign in with Twitter. Then click on Keys and Access Tokens. You should see the following information. Copy the consumer key and consumer secret keys into the following settings in the settings.py file of your project.
Now edit the login.html template and add this code in the u1 element. Open the localhost in your browser and click the Login with Twitter link. You'll be directed to Twitter and it'll ask you to authorize the application. Click on the Authorize app button. You'll be logged in and redirected to the dashboard page of your site. Authentication using Google.
Google offers OAuth 2 authentication. You can read about Google's OAuth 2 implementation at this site. First, you need to create an API key in your Google developer console. Open this site in your browser and click the Create Project button. Give it a name and click the Create button as follows. After the project is created, then click on Credentials section.
Click the Add Credentials button and choose OAuth 2.0 client ID as follows. Google will ask you to configure the consent screen first. This is the page that will be shown to users to give their consent to access your site with their Google account. Click the configure consent screen button. Select your email address. Enter Bookmarks as product name. And click the Save button.
The consent screen for your application will be configured and you'll be redirected to finish creating your client ID. In application type, select web application. In the name, enter Bookmarks. In the authorized redirect URIs, add this localhost link. The form should look like this. Click the create button. You'll get the client ID and client secret keys.
Add them to your settings.py file like this. In the left menu of the Google developers console under the APIs and auth section, click the APIs link. You will see a list that contains all Google APIs. Click on Google+ API and then click the Enable API button in the following page.
Edit the login.html template and add this highlighted code to the u1 element. Open the localhost in your browser. The login page should now look like this. Click the Login with Google button. You should be redirected to Google and asked for permissions with the consent screen we previously configured. Click the accept button. You'll be logged in and redirected to the dashboard page of your website. We've added social authentication to our project. The Python Social Auth module contains backends for other popular online services.
Good job. We've successfully added social authentication to your site. This video concludes the fourth section of this course. In this section, you learned how to build an authentication system into your site and created custom user profiles. You also added social authentication to your site. In the next section, you'll learn how to create an image bookmarking system, generate image thumbnails and create AJAX views.
Note: This course was created by Packt Publishing. We are pleased to host this training in our library.
- Building a social website
- Sharing content in your website
- Creating an image bookmarking website
- Adding Ajax actions with jQuery
- Tracking user actions
- Using Redis to store item views