1

I'm using Angular 9 to create Office Add-Ins, and the application runs SUCCESSFULLY in Outlook windows, but when I try to open the Authentication dialogue (login with microsoft), it redirects to the default windows browser instead of the internal popup. (Office.context.ui is not working)

How can I open login with microsoft dialog box using in Angular on Login button click like this? (WITHOUT Yoeman)

    Office.context.ui.displayDialogAsync(url, options, callback);

My code:

Index.html:

    <script src="https://appsforoffice.microsoft.com/lib/1/hosted/Office.js" type="text/javascript"></script>

main.ts

    declare const Office: any;
    Office.initialize = function () {
      const platform = platformBrowserDynamic();
      platform.bootstrapModule(AppModule);
    };

app.module.ts

    imports:[
        MsalModule.forRoot({
              auth: {
                clientId: environment.uiClienId, // This is your client ID
                authority: 'https://login.microsoftonline.com/' + environment.tenantId, // This is your tenant ID
                redirectUri: environment.redirectUrl// This is your redirect URI
                
              },
              cache: {
                cacheLocation: 'localStorage',
                storeAuthStateInCookie: isIE, // Set to true for Internet Explorer 11
              },
              framework:{ 
                isAngular:true
              }
            }, {
              popUp: true,
              consentScopes: [
                'user.read',
                'openid',
                'profile',
              ],
              unprotectedResources: [],
              protectedResourceMap: [
                ['https://graph.microsoft.com/v1.0/me', ['user.read']]
              ],
              extraQueryParameters: {}
            })]

app.component.ts

     myFunction() {
        this.zone.run(() => {
    
        });

login.component.ts -> Button click function (try with both function)
 

    this.authService.loginRedirect({
        extraScopesToConsent: ["user.read", "openid", "profile"]
      });

OR

    this.authService.loginPopup({
        extraScopesToConsent: ["user.read", "openid", "profile"]
      });
Eugene Astafiev
  • 47,483
  • 3
  • 24
  • 45
BJ Coder
  • 350
  • 5
  • 16
  • When Office.context.ui.displayDialogAsync opens browser instead of dialog, do you see any errors in the callback? Also, is the URL being opened mentioned in the AppDomains element or under the resources/urls section of manifest? If not, please add the URL domain to AppDomain section and check if the issue repros. – Outlook Add-ins Team - MSFT Jul 22 '21 at 01:15
  • Documentation on AppDomain can be found [here.](https://learn.microsoft.com/en-us/office/dev/add-ins/outlook/manifests#app-domains) – Outlook Add-ins Team - MSFT Aug 06 '21 at 14:11
  • @OutlookAdd-insTeam-MSFT - Do we need any backend (node or .net)? is this possible with only Angular (Front-end)? – BJ Coder Aug 13 '21 at 07:18
  • The dialog should work as long as you meet the AppDomain requirements as described above. backend / frontend technologies shouldn't affect this. – Outlook Add-ins Team - MSFT Aug 17 '21 at 22:56

0 Answers0