How to create Outlook Web addin with third party login

Question

i want to develop outlook web addin with third party login functionality, its an task pan addin
given below link there are couple of options for login/authentication, but i am not able to follow.
https://learn.microsoft.com/en-us/office/dev/add-ins/develop/overview-authn-authz

i have custom oauth details with me but i am not sure if i should register app into azure portal or not.
since i dont need to use any of ms 365 services
my sole purpose is login into third party app, but i cannot save all oauth details on js files.
if i register under azure portal, where do i save custom oauth details : client ID and client secret
and how do i access them in outlook addin js files

Answer 1

hello vishal

If you have custom OAuth details and you need to use them in an Outlook add-in, you can register your app in the Azure portal to securely store and manage your OAuth credentials. Here's how you can save your custom OAuth details in the Azure portal:

1. Go to the Azure portal (portal.azure.com) and sign in with your Azure account.
2. Navigate to the Azure Active Directory service.
3. Under "App registrations" or "Enterprise applications" (depending on the Azure AD version), click on "New registration" to create a new app registration.
4. Provide a name for your app and select the appropriate supported account types.
5. Set the appropriate redirect URI(s) for your add-in. In the case of an Outlook add-in, the redirect URI will typically be of the form https://your-addin-domain/owa-auth.
6. Complete the registration process and note down the generated "Application (client) ID". This will serve as your client ID.
7. Depending on your OAuth provider, you may need to configure additional settings such as scopes, permissions, and access tokens. Refer to the documentation of your OAuth provider for specific instructions.
8. If your OAuth provider requires a client secret, you can generate one in the "Certificates & secrets" section of the app registration. Click on "New client secret", provide a description, select an expiration option, and click "Add". Note down the generated client secret value.

To access these custom OAuth details (client ID and client secret) in your Outlook add-in JavaScript files, you can use the Office JavaScript API Office.initialize function. Here's an example:

Office.initialize = function (reason) {
  var clientId = '<your-client-id>';
  var clientSecret = '<your-client-secret>';

  // Use the client ID and client secret in your OAuth flow
};

Replace <your-client-id> with your actual client ID and <your-client-secret> with your actual client secret.

Remember to keep your client secret secure and avoid exposing it in your JavaScript files. You can consider using server-side code or a secure storage mechanism to retrieve the client secret when needed, instead of hardcoding it in your add-in code.