Getting List of YouTube Channel Subscriptions using YouTube Data API V3 in JavaScript

I have been trying to get the list of subscriptions of my channel but unfortunately I get errors every time I run my code, I am describing each step below:

Step 1: I created this channel: My YouTube Channel
Step 2: I enabled the YouTube Data API V3 in Google Developer Console
Step 3: I created API Key and Google OAuth 2.0 Client ID, you can see the following screenshot:

Step 4: I checked the YouTube API Reference and checked some parameters here and got a successful response with all the subscriptions of my channel: YouTube API Reference for my Channel
Step 5: I copied the following code from the YouTube API Reference and placed my own API Key and Google OAuth 2.0 Client ID after I got a successful response for my channel:

<script src="https://apis.google.com/js/api.js"></script><script>   /**   * Sample JavaScript code for youtube.subscriptions.list   * See instructions for running APIs Explorer code samples locally:   * https://developers.google.com/explorer-help/code-samples#javascript   */function authenticate() {  return gapi.auth2.getAuthInstance()    .signIn({scope: "https://www.googleapis.com/auth/youtube.readonly"})    .then(function() { console.log("Sign-in successful"); },          function(err) { console.error("Error signing in", err); });}function loadClient() {gapi.client.setApiKey("YOUR_API_KEY");return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")    .then(function() { console.log("GAPI client loaded for API"); },          function(err) { console.error("Error loading GAPI client for API", err); });}// Make sure the client is loaded and sign-in is complete before calling this method.function execute() {return gapi.client.youtube.subscriptions.list({"part": ["subscriberSnippet,contentDetails"  ],"channelId": "UCLlE_JEV7I0pQ7fhY4BIrrQ"  })    .then(function(response) {            // Handle the results here (response.result has the parsed body).            console.log("Response", response);          },          function(err) { console.error("Execute error", err); });}gapi.load("client:auth2", function() {gapi.auth2.init({client_id: "YOUR_CLIENT_ID"});});

Step 6: Then I added the following buttons in my HTML code:

<button onclick="authenticate().then(loadClient)">authorize and load</button><button onclick="execute()">execute</button>  

Step 7: When I execute the code, I get the following error messages:

Error 1:  "You have created a new client application that uses libraries for user authentication or authorization that will soon be deprecated. New clients must use the new libraries instead; existing clients must also migrate before these libraries are deprecated. See the [Migration Guide](https://developers.google.com/identity/gsi/web/guides/gis-migration) for more information."  

Step 8: Then I click the authorize and load button and sign in to my channel and allow any requested rights. After that, when I click the execute button, then I get the following error:

"The requester is not allowed to access the requested subscriptions."  

This is worth mentioning that this is my own channel, I login when required and I allow any rights that are requested. I also use my own Google Developer Console account, my own API Key and my own OAuth 2.0 Client ID. I have enabled the YouTube Data API V3 and I have set up everything properly. I can get the proper result from the YouTube API reference but I can't get it using JS.

Any help is appreciated in advance.