قالب وردپرس درنا توس
Home / Tips and Tricks / Why you should use third-party login (OAuth) for your web app – CloudSavvy IT

Why you should use third-party login (OAuth) for your web app – CloudSavvy IT

Third party login.

OAuth removes the need to store confidential user passwords on your server. Instead, the user trusts you to access their basic profile information from a service like Google, which handles the authentication for you.

Third-party login frees you from managing passwords

Third-party login is an alternative to verifying username / password. You̵

7;ve definitely encountered this before if you’ve ever been asked to sign in with Google or Facebook – you simply authenticate with your social media profile without entering any passwords.

It is easier to talk about the problems with the alternatives. If you do not want to use third-party authentication, you have to handle everything yourself. This means that you will be responsible for storing the user’s passwords, which is not impossible if they are properly salted and hashas. But it’s a hassle, and you do not want to be responsible for any data breaches that contain passwords, even if they are stored correctly.

Third-party login eliminates the chance of this happening, as you never handle anything private at all. That job is left to Google, Facebook and all other OAuth providers. Even if your entire server network has been compromised, you have no access to anything but publicly visible social media profiles.

What is the disadvantage?

Theoretically, there is nothing else with OAuth compared to password permission; It’s just another way to log in. But in practice, OAuth addresses some issues.

First, you need to trust the OAuth provider to handle user data securely. However, this is not your problem, as all violations on their part do not affect your service. But control over users who log in is handed over to the provider, which some people may not be okay with.

The user must also trust you to authenticate with the provider, and they must also have an account with one of the providers. The solution to this is to offer several suppliers; a user may not want to sign in with their Facebook account, but they may be okay to sign in with their Gmail account.

However, this presents another problem that is unique to OAuth – users can create multiple accounts in the event of an accident. The registration process is often the same as logging in, as it is handled in the same flow. This can lead to users forgetting which account they signed up for and accidentally signing up with a new account. This can even be a violation of DDRP if not handled properly. You want to make sure that “Register” and “Log in” are handled separately.

How does it work?

Third party login uses OAuth 2.0 for authentication. OAuth is a collection of standards, and there are many different OAuth feeds for different uses. The most common used for social sign-on is the flow of the approval code.

In the approval code flow, your server delivers your web app as usual to the client. When they click “Sign Up”, they will be redirected to your login page with the OAuth provider (Google, in this example). You need to register your application with Google and provide some information that your users will see. Google will ask the user if it’s okay for your application to access their profile information.

If the user accepts, Google will redirect them to a redial address with an authorization code.

Google login flow.  The client confirms that the server is allowed account access.

This authorization code acts as the key to the user’s account. Although not exactly a key; it is more like an IOU where the client confirms that the server has access to the account. It is only allowed to be used by your server.

It is used only once, because your server immediately sends the key to Google to obtain an access token and the ID token, which is used to actually access the user’s account. Alternatively, you can request an update token to update the access token after it expires, without asking the user for another authorization code.

    The server sends the key to Google to obtain an access token and ID token, which is used to actually access the user's account

In this feed, you only request access to view basic profile information so that you can identify the user. This is called yours extent, which is the amount of data and the number of features you have access to. Each OAuth provider has different scopes (here’s a list of Google’s), and you can also use OAuth for administrative access to accounts, such as services that might need access to a user’s inbox or Google Drive account.

How do I set it up?

We use Google’s OAuth libraries for this example, as they are easy to install. But Facebook, Github and Twitter are all popular OAuth providers as well, and it’s a good idea to implement at least two providers in your application. And if you’re developing an iOS app, you’ll need to implement Apple as an OAuth vendor by logging in with the Apple application (if you use third-party login in the first place).

First, switch to the Google API console and create a new project. Select “Browser” as the client type and enter your source URL.

Then include the Google Platform Library as a script on your site:

And include your client ID as a meta tag in the page title:

You can implement the button yourself or use the preventive one:

Implement the login button yourself, or use a pre-built one.
From there, users should be able to fully authenticate. But this button defines a redial, “onSignIn,” where you want to perform all the processing you need. For example, you can ask Google for basic profile information for the user:

function onSignIn(googleUser) {
  var profile = googleUser.getBasicProfile();
  console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
  console.log('Name: ' + profile.getName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is not present.

If you further authenticate with a backend server, you want to send ID tokens rather than profile information, as these can be validated by the server.

If you do not want to set this yourself, you can use Auth0, which is free for up to 7000 monthly users, and also supports Touch ID and two-factor authorization. Or you can use another library like react-google login, which handles this process in a React app.

Source link