Create cloud configuration page with custom HTML

[roberthehn]

I'm using Adobe Experience Manager 2023.8.13206.20230821T124823Z-230702 (AEMaaCS) and I need to create a custom cloud config page with custom HTML, as I need to do some social media platforms login (I basically need access_token for facebook graph API - would require a popup to login). I can't find anywhere an updated step-by-step on how to create a custom config page with custom html. Could someone point me in the right direction? Thank you.

[EstebanBustamante]

Sorry, I don't know if I fully understand your question, are you looking for a way to log in using a social media account? If so, can check the following thread which can give you some direction: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/set-up-aem-sso-authenticat... 

[roberthehn]

Thank you for your reply, but login with Facebook is not what I'm looking for.
I want to use the posts graph API
https://developers.facebook.com/docs/graph-api/reference/v18.0/user/posts

Basically I need to display in a component the latest posts of the company on Facebook, so I need to get a User Token which require a popup. I was looking at 
https://github.com/AdobeDocs/experience-manager-65.en/blob/main/help/sites-developing/extending-clou...
but without success. I need to have a cloud configuration page with custom html so I can add 

<script>  window.fbAsyncInit = function() {    FB.init({      appId            : 'your-app-id',      xfbml            : true,      version          : 'v18.0' }); }; </script> <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

[EstebanBustamante · Accepted solution]

Ok, so let me give you some input on how you could do it:

- Create a new component that will manage the script and the "Authentication Token", which I imagine is sent as part of the FBK JS file. See more here: https://medium.com/@techzette2/first-sling-model-aem-7ffdc913821e.  

- If the Access Token can be stored, create an OSGI configuration where you can store that safety and use it when the new component is rendered. See more here: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/create-cloud-configuration...
https://medium.com/slalom-technology/how-to-use-environment-variables-in-adobe-experience-manager-ae... 

[arunpatidar]

Hi,

Here you can find this 

https://experienceleague.adobe.com/docs/experience-manager-65/developing/extending-aem/extending-clo...

[kautuk_sahni]

@roberthehn Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.