GoogleAuthComponent.vue

<template>
    <div class="container">
        <!--Add buttons to initiate auth sequence and sign out-->
        <button id="authorize_button">Authorize</button>
        <button id="signout_button">Sign Out</button>
        <pre id="content" style="white-space: pre-wrap;"></pre>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                CLIENT_ID : '*****************************.apps.googleusercontent.com',
                API_KEY : '*****************************',
                DISCOVERY_DOCS : ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"],
                SCOPES : 'https://www.googleapis.com/auth/drive',
                authorizeButton: null,
                signoutButton: null,
                gapi: null,
            }
        },
        mounted() {
            this.authorizeButton = document.getElementById('authorize_button');
            this.signoutButton = document.getElementById('signout_button');

            // app.blame.php で api.js を取得する前に mounted が実行される可能性があるため 
            // setInterval と if(window.gapi) で確認する
            const id = setInterval(() => {
                if(window.gapi){
                    this.gapi = window.gapi;
                    this.handleClientLoad();
                    clearInterval(id);
                }
            }, 1000);
        },
        methods: {
            handleClientLoad () {
                this.gapi.load('client:auth2', this.initClient);
            },
            initClient() {
                this.gapi.client.init({
                    apiKey: this.API_KEY,
                    clientId: this.CLIENT_ID,
                    discoveryDocs: this.DISCOVERY_DOCS,
                    scope: this.SCOPES,
                }).then(() => {
                    // Listen for sign-in state changes.
                    this.gapi.auth2.getAuthInstance().isSignedIn.listen(this.updateSigninStatus);

                    // // Handle the initial sign-in state.
                    this.updateSigninStatus(this.gapi.auth2.getAuthInstance().isSignedIn.get());
                    this.authorizeButton.onclick = this.handleAuthClick;
                    this.signoutButton.onclick = this.handleSignoutClick;
                }, (error) => {
                    this.appendPre(JSON.stringify(error, null, 2));
                });
            },
            updateSigninStatus(isSignedIn) {
                if (isSignedIn) {
                    this.authorizeButton.style.display = 'none';
                    this.signoutButton.style.display = 'block';
                    this.listFiles();
                } else {
                    this.authorizeButton.style.display = 'block';
                    this.signoutButton.style.display = 'none';
                }
            },
            handleAuthClick(event) {
                this.gapi.auth2.getAuthInstance().signIn();
            },
            handleSignoutClick(event) {
                this.gapi.auth2.getAuthInstance().signOut();
            },
            appendPre(message) {
                const pre = document.getElementById('content');
                const textContent = document.createTextNode(message + '\n');
                pre.appendChild(textContent);
            },
            listFiles() {
                this.gapi.client.drive.files.list({
                    'pageSize': 10,
                    'fields': "nextPageToken, files(id, name)"
                }).then((response) => {
                    this.appendPre('Files:');
                    const files = response.result.files;
                    if (files && files.length > 0) {
                        for (let i = 0; i < files.length; i++) {
                            let file = files[i];
                            this.appendPre(file.name + ' (' + file.id + ')');
                        }
                    } else {
                        this.appendPre('No files found.');
                    }
                });
            },
        }
    }
</script>