Using Musickit javascript sdk with Ionic

I am trying to use Apple’s new javascript musickit sdk “https://developer.apple.com/documentation/musickitjs” inside an ionic app, but the authentication doesn’t work when I test in emulators, everything works as expected in the browser. When I call MusicKit.getInstance().authorize(), my app gets reloaded in an inappbrowser window. I am using cordova-plugin-inappbrowser in my app and this is the error I get in the console

. When I remove the inappbrowser plugin, Apple’s authentication window opens and after I enter the credentials I get redirected to a blank page with a loading indicator and I get this error .

Hello,
Please did you get() a solution to this ?.thanks

I’m experiencing a similar issue, though now after authentication I’m getting a “Problem Connecting” issue. Does anyone know what the problem might be?

I attempted to load the authentication url both inside and outside of the app. Strange thing is that this works perfectly on desktop. Could it be an error with redirecting back inside the app or saving a cookie?

I have exactly the same problem! Works perfectly on Desktop / Chrome. On Android after login in it says “Problem with connection” / no destination in log. I think that’s because of missing redirect_uri (login app don’t know where to redirect)?

So glad to hear that someone else is experiencing the same issue! I was beginning to think that it was just me. I’m thinking it’s that too, though I don’t know how to pass that data into the authorization request/function.

Could you find any documentation on the authorization method in MusicKit JS?

No - I didn’t find any documentation. In comparison to Spotify and Deezer it’s really poor documented… For Spotify and Deezer I could implement a “normal” OAuth flow. It seems that Apple Music wants to handle that authentication itself - if it would work it would be easier (once you managed to sign / encrypt the JWT ;-)). On iOS the browser window doesn’t even open…

I know what you mean. I was able to get a reply from someone from Apple on this thread:
https://forums.developer.apple.com/message/420231#420231

I am able to get the iOS browser window to open in the very least, so if you need help with that, let me know! At this point, I’m considering submitting a TSI to Apple to fast-track solving this problem.

I have musickit working fine in the demo here

with a live demo here
https://startrack-ng.web.app

1 Like

Thank you so much for the reply! This is so helpful, and I can’t believe I hadn’t found this earlier!

I did find that everything worked while in the browser on both mobile and desktop, but when I attempted to add my own MusicKit developer token and build the project to iOS, I received this error after opening the app:

2020-05-15 11:19:32.428789-0400 App[1243:586462] DiskCookieStorage changing policy from 2 to 0, cookie file: file:///private/var/mobile/Containers/Data/Application/402135C7-40CC-4202-A0CE-B4179D7496C8/Library/Cookies/Cookies.binarycookies
2020-05-15 11:19:32.636102-0400 App[1243:586462] WF: === Starting WebFilter logging for process App
2020-05-15 11:19:32.636154-0400 App[1243:586462] WF: _userSettingsForUser mobile: {
    filterBlacklist =     (
    );
    filterWhitelist =     (
    );
    restrictWeb = 1;
    useContentFilter = 0;
    useContentFilterOverrides = 0;
    whitelistEnabled = 0;
}
2020-05-15 11:19:32.636191-0400 App[1243:586462] WF: _WebFilterIsActive returning: NO
2020-05-15 11:19:32.698806-0400 App[1243:586462] *** NSForwarding: warning: object 0x1ee85d398 of class 'PFEmbeddedMulticasterImplementation' does not implement methodSignatureForSelector: -- trouble ahead
2020-05-15 11:19:32.698996-0400 App[1243:586462] *** NSForwarding: warning: object 0x1ee85d398 of class 'PFEmbeddedMulticasterImplementation' does not implement doesNotRecognizeSelector: -- abort
(lldb) 

Note: I compiled using Capacitor

I have no idea what this error means, but I do wonder if I need to implement deeplinking into my app for the authentication to work. Let me know what you think!

cool. what was the workaround for getting the browser open on iOS?

I can get the browser to open on iOS by calling the authenticate() function. It automatically redirects to Safari. I can also manually “authenticate” by calling the url it redirects to inside of a Capacitor web browser.

Feel free to attach some code if you’re having trouble getting the authentication window to open! I’ll help if I can.

Hi,

did you solve your issues yet? I have same problem, authorization goes through on MacBook Chrome, but as soon as I build versions for Android/IOS with capacitor, there’s redirection to Safari and after login to Apple - Connection problem.

Hi!

Unfortunately I haven’t yet found a solution to this problem. I’m glad to see another person experiencing it though. If I make any discoveries, I’ll let you know.

Tate

1 Like

I have written my own Capacitor plugin for Music Kit for IONIC. It allows to authorize and play song of your choice. It will be finished in next weeks and I’ll be more than happy to share it if you need it.

1 Like

That would be incredible. Please share when you complete it. Thank you so much!

Hi guys,

Capacitor plugin working version is published there. It is not fully finished yet, but it supports methods, mentioned on the link. I hope it will help you, any feedback is more than appreciated.

Stay cool :metal:t2: