Any chance of an Ionic Capacitor version of this plugin?

[aplongh]

Hi Walter, first of all, thank you for this great plugin. I've managed to integrate it into a capacitor project, manually changing the required variables (clientId, Android SHA1, tenant, etc.). Even though it works great, this means we have to "re-wire" every time there is a local npm install, but we have not found a way to replace the variables when using CI/CD. So when the CI/CD pipelines issues an "nom install", it resets the variables to the defaults.

Is there any chance to have a capacitor version of the plugin? Or is there a way to provide the variables in a json file (or alike), other than providing those values at the cli (cordova plugin add cordova-plugin-msal --variable TENANT_ID=your-tenant-guid-here --variable CLIENT_ID=your-client-guid-here --variable KEY_HASH=S0m3K3yh4shH3re=)?

Best regards, Ariel

[wrobins]

Hello and thanks for your feedback!

I'd be happy to add support for Capacitor to this plugin. I can't promise you it will be soon as in the next few days as my day job has had me working some long hours lately (it's rewarding so I don't mind!), but I'll try to snag this before I start working on some of the larger v3 features.

Cheers!

[bhandaribhumin]

@wrobins need some help to pass webparameter https://github.com/bhandaribhumin/msal-capacitor-plugin

[aplongh]

Hi Walter, we managed to make it work with Capacitor. If you'd like, I can share the approach we took to make it work. Regards, Ariel

On Fri, Aug 7, 2020 at 1:27 PM Walter Robins notifications@github.com wrote:

Hello and thanks for your feedback!

I'd be happy to add support for Capacitor to this plugin. I can't promise you it will be soon as in the next few days as my day job has had me working some long hours lately (it's rewarding so I don't mind!), but I'll try to snag this before I start working on some of the larger v3 features.

Cheers!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/wrobins/cordova-plugin-msal/issues/48#issuecomment-670625560, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACEIUQ6YA4RBGWRZTS4J6LLR7Q2PPANCNFSM4PSRH7YQ .

[bhandaribhumin]

@aplongh if you need some help just let me know, happy to contribute 👍

[aplongh]

Hi Bhumin, we managed to make it work with Capacitor, although I'm not sure it's the best approach, as there is some configuration that must be made manually. The good news is that it works perfectly. They way we managed to make it work is the following:

1. npm install --save cordova-plugin-msal
2. npm install ionic-msal-native --save
3. add the following in capacitor.config.json, in the "cordova" section: "preferences": { "tenantId": "common", "clientId": "8da01b18-ca25-4677-9d87-368cf4ae2fd6", "keyHash": "ennzvlvjcFBUJoW1XubqR1psynk=" }
4. add the following in androidManifest, inside <activity android:name="com.microsoft.identity.client.BrowserTabActivity">

   </activity>

5. add the following in info.plist inside CFBundleURLTypes CFBundleTypeRole Editor CFBundleURLSchemes msauth.cl.xrm.cis.mobile
6. add the following to info.plist LSApplicationQueriesSchemes msauthv2 msauthv3

As you can see, there is some manual steps, but it works. If you have a better approach, I'll be more than interested to know about it.

Best regards

On Wed, Sep 9, 2020 at 4:08 PM Bhumin Bhandari notifications@github.com wrote:

@aplongh https://github.com/aplongh if you need some help just let me know, happy to contribute 👍

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/wrobins/cordova-plugin-msal/issues/48#issuecomment-689758517, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACEIUQ6OEUOIC6ICYWZX7CDSE7HBBANCNFSM4PSRH7YQ .

[aplongh]

This is what we did to make the plugin work with Capacitor. It involves several manual steps, but it works like a charm. Thanks again for your marvelous plugin.

1. npm install --save cordova-plugin-msal
2. npm install ionic-msal-native --save
3. add the following in capacitor.config.json, in the "cordova" section: "preferences": { "tenantId": "common", "clientId": "8da01b18-ca25-4677-9d87-368cf4ae2fd6", "keyHash": "ennzvlvjcFBUJoW1XubqR1psynk=" }
4. add the following in androidManifest, inside <activity android:name="com.microsoft.identity.client.BrowserTabActivity">

   </activity>

5. add the following in info.plist inside CFBundleURLTypes CFBundleTypeRole Editor CFBundleURLSchemes msauth.cl.xrm.cis.mobile
6. add the following to info.plist LSApplicationQueriesSchemes msauthv2 msauthv3

Best regards

On Fri, Aug 7, 2020 at 1:27 PM Walter Robins notifications@github.com wrote:

Hello and thanks for your feedback!

I'd be happy to add support for Capacitor to this plugin. I can't promise you it will be soon as in the next few days as my day job has had me working some long hours lately (it's rewarding so I don't mind!), but I'll try to snag this before I start working on some of the larger v3 features.

Cheers!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/wrobins/cordova-plugin-msal/issues/48#issuecomment-670625560, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACEIUQ6YA4RBGWRZTS4J6LLR7Q2PPANCNFSM4PSRH7YQ .

[bhandaribhumin]

@aplongh thanks so much for your great workaround steps, Do you have an idea how to pass webViewParameters?

parameters = MSALInteractiveTokenParameters(scopes: kScopes, webviewParameters: webViewParameters)

[aplongh]

Sorry, not at all. We come from an Angular background, so making the shift to Ionic was quite easy. But we stick to web technologies (Angular, Ionic, Bootstrap, Material Design, etc.). We have no experience in native device coding.

[baeteja]

Any insight on when and if there will be support for ionic react (capacitor)? Also, what would be the best current workaround for someone who has no native development experience?

[zzmmbb]

Hello, I tried to introduce it to the ionic5 capacitor, but the prompt cordova is not defined can you guide me how to correctly introduce this plug-in?

[VinyP]

Has anyone successfully implemented this in Ionic 5 with capacitor?

[aplongh]

@VinyP, absolutely. With the help of Josh Morony, we were able to integrate the plugin seamlessly with Capacitor 2.0 and trying it out with Capacitor 3.0. I'm a bit overwhelmed right now with work, but will share the procedure to make it work as soon as I have some time.

[VinyP]

@VinyP, absolutely. With the help of Josh Morony, we were able to integrate the plugin seamlessly with Capacitor 2.0 and trying it out with Capacitor 3.0. I'm a bit overwhelmed right now with work, but will share the procedure to make it work as soon as I have some time.

@aplongh Fantastic! I've been pulling my hair trying to get this to integrate with Cap 3.0.

Will the plugin allow user to sign-in by entering their credentials and redirects back to app?

[micro0o]

@aplongh Could you please share how did you integrate this with Capacitor 2.0 or 3.0 Thanks

[daveywc]

I'm using Capacitor 3.0 with Ionic and Angular 12.1. I found that I needed to use this updated version of the ionic native plugin for things to work: https://github.com/orjandh/ionic-msal-native

[bradical1379]

Hi @wrobins and @aplongh - I noticed that this issue is a few years old now, but I wanted to see if there was any updates on the Capacitor plugin for MSAL. I am trying to implement this plugin with our React / Ionic / Capacitor project and have been running into a lot of dead ends. Any help would be much appreciated.

[peitschie]

I'm happily using master for this plugin with capacitor 4 & 5 without the ionic-msal-native plugin.

Similar steps as listed previously a few times here:

1. npm install --save cordova-plugin-msal
2. add the following in capacitor.config.json, in the "cordova" section:

   "preferences": {
     "tenantId": "common",
     "clientId": "8da01b18-ca25-4677-9d87-368cf4ae2fd6",
     "keyHash": "ennzvlvjcFBUJoW1XubqR1psynk="
   }

3. add the following in android/app/src/main/AndroidManifest.xml, inside <application></application> (note: you'll need to add the xmlns:tools="http://schemas.android.com/tools" namespace in the <manifest> tags most likely)

       <activity
           tools:node="replace"
           android:exported="true"
           android:name="com.microsoft.identity.client.BrowserTabActivity">
           <intent-filter>
               <action android:name="android.intent.action.VIEW" />
               <category android:name="android.intent.category.DEFAULT" />
               <category android:name="android.intent.category.BROWSABLE" />
               <data android:scheme="msauth" android:host="${applicationId}" android:path="/${signingKeyHash}" />
           </intent-filter>
       </activity>

4. Add the signing key hash in app/android/variables.gradle

   appSigningKeyHash = 'ennzvlvjcFBUJoW1XubqR1psynk='

5. iOS specifics as previously mentioned

I use trapeze to help manage the keys in CI with a snippet like this in my trapeze.yaml

vars:
  # All values should be selected to be safe for developer debug builds by default
  APP_SIGNING_KEY_HASH:
    # This value is for an unsigned app (i.e., app-debug variant)
    default: M61nf+aC69kCXmFY1ejcX83rDNc=

project:
  json:
    - file: capacitor.config.json
      set:
        keyHash: "$APP_SIGNING_KEY_HASH"

platforms:
  android:
    gradle:
      - file: variables.gradle
        target:
          ext:
            appSigningKeyHash:
        replace:
          - appSigningKeyHash: = '$APP_SIGNING_KEY_HASH'

[bradical1379]

I'm happily using master for this plugin with capacitor 4 & 5 without the ionic-msal-native plugin.

Similar steps as listed previously a few times here:

1. npm install --save cordova-plugin-msal

2. add the following in capacitor.config.json, in the "cordova" section:

    "preferences": {

      "tenantId": "common",

      "clientId": "8da01b18-ca25-4677-9d87-368cf4ae2fd6",

      "keyHash": "ennzvlvjcFBUJoW1XubqR1psynk="

    }

3. add the following in android/app/src/main/AndroidManifest.xml, inside <application></application> (note: you'll need to add the xmlns:tools="http://schemas.android.com/tools" namespace in the <manifest> tags most likely)

        <activity

            tools:node="replace"

            android:exported="true"

            android:name="com.microsoft.identity.client.BrowserTabActivity">

            <intent-filter>

                <action android:name="android.intent.action.VIEW" />

                <category android:name="android.intent.category.DEFAULT" />

                <category android:name="android.intent.category.BROWSABLE" />

                <data android:scheme="msauth" android:host="${applicationId}" android:path="/${signingKeyHash}" />

            </intent-filter>

        </activity>

4. Add the signing key hash in app/android/variables.gradle

    appSigningKeyHash = 'ennzvlvjcFBUJoW1XubqR1psynk='

5. iOS specifics as previously mentioned

I use trapeze to help manage the keys in CI with a snippet like this in my trapeze.yaml

vars:

  # All values should be selected to be safe for developer debug builds by default

  APP_SIGNING_KEY_HASH:

    # This value is for an unsigned app (i.e., app-debug variant)

    default: M61nf+aC69kCXmFY1ejcX83rDNc=

project:

  json:

    - file: capacitor.config.json

      set:

        keyHash: "$APP_SIGNING_KEY_HASH"

platforms:

  android:

    gradle:

      - file: variables.gradle

        target:

          ext:

            appSigningKeyHash:

        replace:

          - appSigningKeyHash: = '$APP_SIGNING_KEY_HASH'

Thanks for the reply and info. Much appreciated.

Has anyone had luck with implementing this using React and Ionic? If so, could you provide an example of your code.

[bradical1379]

@peitschie - can you explain what adding this to the variables.grade file does and where are you supposed to reference that variable at?

4. Add the signing key hash in app/android/variables.gradle

    appSigningKeyHash = 'ennzvlvjcFBUJoW1XubqR1psynk='

[peitschie]

@bradical1379 that's purely so I can control the signing key from trapeze. Hardcoding the values as you did in https://github.com/wrobins/cordova-plugin-msal/issues/109 should be fine.

[dandamoodi]

@peitschie could you please share a sample implementation to try. I am stuck actually to implement this in our project. highly appreciate if you share any sample project

[dandamoodi]

Has anyone successfully implemented this in Ionic 5 with capacitor?

@VinyP Can you share the sample code what worked for you