As Azure AD uses OAuth 2.0 for its connectivity, we can set this up as a login method using our generic OAuth 2.0 setup. The below guide shows a basic setup of Azure AD, with a standard Invision Community setup.
Before you continue, this guide assumes that you already have an Azure account and organisation already set up. If you do not yet have this, you should go ahead and ensure you have this set up first.
The first thing we will need to do in order to get our oauth setup working, is to create the relevant permissions within Azure. Within your Azure services screen, select the "Azure Active Directory" link as shown.
Account Services
Now we are in the Active Directory area of your Azure setup, select "App Registrations" from the left so we can register a new application
App Registration Menu Option
Click on New Registration, to register a new application
New App Registration
You can give the user facing display name of the application anything you wish. You can change this later if you decide you want to name it something differently, so we have just used Azure OAuth Test for the time being.
Select the "Supported account types" option that relates to how you want your login setup.
The Redirect URI can be found within your admin CP if needed, by visiting the following location to start setting up the admin CP side
System -> Settings -> Login & Registration ->Create new -> Other Oauth 2.0
By default the URL to enter will be as follows. Replacing the yourURL with your own sites URL - https://yourURL/oauth/callback
Callback URL Example
How this is set up, we can add the API Permissions. Go back to the overview screen, and select "View API permissions"
View API Permissions
You may find that there is already the User.Read permissions set up, as shown below. If there is, you can skip the next step.
Example Permissions
If this is not already set up, select "Add a permission". This will then ask what type of permission you wish to add. For the purpose of our setup, we will be selecting "Microsoft Graph"
Permission Type Selection
You will then be asked which type of permissions you require. You need to select "Delegated permissions"
Select Delegate Permissions
Then select the following permissions
User->User.Read
User Permission Options
Now we have the permissions set up, we need to create the client secret. This secret will then be used for the setup in your admin CP. Select "Certificated & secrets" from the menu on the left.
Client Secret Menu Item
Once you are in this area, you need to
- Select the "New client secret" button
- Select "Never" on the expiry
- Add a name for your secret (can be anything you wish)
Client Secret Setup
Click on Add, and you will then see the secret at the bottom of the page. You need to copy this secret for use in subsequent sections of this guide.
Copy Secret Key
Now we have the Azure side set up, we can set up the Auth setup within the admin CP. If you have not done so already, visit the following area in the Admin CP to start the setup
System -> Settings -> Login & Registration ->Create new -> Other Oauth 2.0
The first thing we will enter, will be a the basic settings. It doesnt matter what you call the login method, as long as its something you can recognise in the ACP, should you need to revisit this area in the future. Leave the other 2 items as default
Basic Settings
The next section is "Application Settings". This is where you will add the relevant information for your azure setup. All items should be left as default unless stated here. Your client and tenant ID locations are shown in the image below for when needed
Client ID and Tenant ID
-
Client Identifier - This is the "Application (client) ID" that you will see at the top of the overview page.
-
Client Secret - This is the secret key that was copied out in the previous section of this guide
-
Scopes to Request - Enter "user.read" (without the quotes)
-
Authorization Endpoint - This should be the following URL. However replace where it states "tenant_id_here" with your tenant ID. This can be found on the overview page of azure active directory named "Directory (tenant) ID"
https://login.microsoftonline.com/tenant_id_here/oauth2/authorize?resource=https://graph.microsoft.com/
-
Token Endpoint - This should be the following URL. Again you should replace where its states "tenant_id_here" with your own tenant id
https://login.microsoftonline.com/tenant_id_here/oauth2/token?resource=https://graph.microsoft.com/
-
User Information Endpoint - Please ensure the following URL
https://graph.microsoft.com/v1.0/me
-
User ID Parameter - Enter "id" (without the quotes)
-
Display Name Parameter - Enter "displayName" (without the quotes)
-
Email Address Parameter - Enter "mail" (without the quotes)
- Profile Photo URL Parameter - Leave blank
Application Settings
The final part is to fill in the 'Appearance Settings', and 'Account Management' settings. What you add for these would be your own preference, depending on how you wish for the login button to be displayed, and the action to be taken in various scenarios with user accounts.
Appearance and Account Settings
This now concludes the azure setup. You can test this by logging into the site on the front end from a valid account
Login Button
Report Guide