How to setup Facebook and Google Apps to work with OAuth on UWP applications

Follow these steps to get OAuth working in Windows Store applications (UWP).

Facebook:

  1. Go to Windows Dev Center
  2. Create a new application
  3. Once in app overview click on “App management” -> “App identity
  4. Take note of the Package SID (starts with something like: S-1-15-2-more-numbers)
  5. Open the WebAuthenticationBroker sample from Windows 10 Samples on GitHub
  6. Right click on the project name and select “Store” -> “Associate App with the Store
  7. Follow the steps until you see the application created in your Windows Dev Center to associate it with the current project.
  8. Open scenario1.js and change line 43 where it reads: scope=read_stream to scope=public_profile,email (or any other set of properties you want to access.)
  9. Register as Facebook developer
  10. Create a new application
  11. Go to “Settings” and click “Add Platform” -> “Windows App
  12. In the Windows Store ID field enter the Package SID that you took note before (refer to step 4)
  13. Click “Save changes
  14. Click on “Advanced” – tabs on the top of the page
  15. In the “Client OAuth Settings” make sure that “Client OAuth Login” is checked as “Yes“.
  16. Click on “Teat Apps” on the side menu.
  17. Click on “Create a Test App” and create a test application with the name of your choice.
  18. Once in the dashboard of the newly created application take note of the “App ID“.
  19. Click on “Roles” in the side menu.
  20. Click on “Test Users” -> “Add” -> “Create Test Users“.
  21. In the “Test Users” section click on “Edit” -> “Change the name or password for this user” and enter a password of your choice.
  22. Take note of the Test User’s email and password.
  23. Return to Visual Studio and run the application.
  24. Enter the App ID (refer to step 18) in the “Facebook App ID” field.
  25. Enter ms-app://Package SID (refer to step 4 to get the package SID) on the “Callback URL” field.
  26. Click on “Launch“.
  27. Enter the Facebook’s test user email and password (refer to step 22).

 

Google:

  1. Go to Google Developers Console (https://console.developers.google.com/)
  2. Create a new project
  3. In the “Use Google APIs” section click on “Enable and manage APIs
  4. In the “Social APIs” section click on “Google+ API“.
  5. Click “Enable API“.
  6. Click “Credentials” in the side bar menu.
  7. Click “Add credentials” and then select “OAuth 2.0 client ID“.
  8. Click on “Configure consent screen“.
  9. Enter a product name and click “Save“.
  10. In the “Application type” select “Other” give it a name (e.g. “Windows Store App”) and click “Create“.
  11. Take note of the client ID.
  12. Go to Visual Studio and run the WebAuthenticationBroker application.
  13. Switch to the Google OAuth using the hamburger menu.
  14. Enter the Client ID (refer to step 11).
  15. Enter google credentials.

 

Note: If your project crashes around line 57:

if (Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAndContinue)

on desktop or tablet make sure to change it to

if (Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAndContinue &&
Windows.System.Profile.AnalyticsInfo.versionInfo.deviceFamily == "Windows.Mobile")
Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *