QR Code Login Prerequisites

Set up one-time token exchange, configure an Apex class, and set up a Visualforce page.

1. Generate a self-signed certificate and name it JWT_Bearer. See Salesforce Help: Generate a Self-Signed Certificate.
2. Download the certificate.
3. Create a connected app and set its client ID to jwtClientId.
4. Enable digital signatures. 
5. Upload the certificate that you downloaded in step 2.
6. In App Manager, go to Selected OAuth Scopes and add Manage user data via Web browsers (web) and Perform requests at any time (refresh_token, offline_access).
7. In your connected app, go to Manage > Edit Policies > OAuth Policies and set the Permitted Users dropdown to Admin approved users are pre-authorized.

One of the requirements for QR code login is a properly configured Apex controller class. The Apex controller class generates the login URL by using the UI Bridge API and provides it to the Visualforce page before it’s encoded to the QR code. You can set up your Apex controller class to generate the login URL by using either the OAuth 2.0 hybrid web server flow or the OAuth 2.0 hybrid user-agent token flow. For more information on Apex, UI Bridge API, and the auth flow options, see:

• What is Apex?
• Salesforce Help: Generate a Frontdoor URL to Bridge into UI Sessions
• Salesforce Help: OAuth 2.0 Hybrid Web Server Flow
• Salesforce Help: OAuth 2.0 Hybrid User-Agent Token Flow for Web Session Management

To create an Apex class, complete these steps.

1. In Salesforce Setup, search for and select Apex Classes. 
2. Click New, and then fill in a name for your Apex Class.
   • If you’re using OAuth 2.0 hybrid web server flow, see Configure Your Apex Class with Web Server Flow.
   • If you’re using OAuth 2.0 user-agent flow, see Configure Your Apex Class with User-Agent Flow.
3. Click Save or Quick Save.

To configure your Apex class with web server flow, add this code sample in the Apex Class tab. Make sure to fill in the class’s placeholder variables with their corresponding values. For variable descriptions, see the code comments.

To configure your Apex class with user-agent flow, add this code sample in the Apex Class tab.

Your Visualforce page invokes the Apex controller class, receives the generated UI Bridge API login URL, then encodes it to a QR code for the app to scan.

For more information on Visualforce pages, see Creating Your First Page in the Visualforce Developer Guide.

To set up a Visualforce page for QR code login, follow these steps.

1. In Salesforce Setup, search for and select Visualforce Pages.
2. Click New, and then fill in a name for your Visualforce page.
3. Click the Page Editor bar at the bottom of the browser, and then add this Visualforce markup.