페이지 이동경로
  • Docs>
  • JavaScript

JavaScript

Legacy JavaScript

This document guides how to use the Kakao SDK for JavaScript v1("Legacy JavaScript SDK") provided by the Kakao API platform.

Upgrade v1 to v2

We highly recommend upgrading to the new SDK because the Legacy JavaScript SDK may be deprecated after a certain period of time.

Install SDK

Download the latest version of the JavaScript SDK v1 and import the downloaded script file into the webpage.

To import the JavaScript SDK v1 into the web page, add the following <script> element into the HTML. It keeps the SDK up-to-date all the time.

<script src="https://t1.kakaocdn.net/kakao_js_sdk/v1/kakao.min.js"></script>

Initialize SDK

Note

To use the JavaScript SDK v1, register the Web platform in advance. Go to [My Application] > [Platform] and register the site domains.

To configure the project, a JavaScript key is required. Go to [My Application] > [App Keys] to get a JavaScript key.

To initialize the JavaScript SDK v1, add the init() function in the JavaScript file and pass a JavaScript key copied in [My Application] > [App Keys].

Kakao.init('JAVASCRIPT_KEY');
Kakao.isInitialized();

Here is an example of initializing the JavaScript SDK and checking if the initialization is successfully done by calling the isInitialized() function. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Kakao JavaScript SDK</title>
  <script src="YOUR_SDK_FILE_PATH"></script>
  <script>
    // Initialize SDK with JavaScript key for your app.
    Kakao.init('JAVASCRIPT_KEY');

    // Check if the initialization is successfully done.
    console.log(Kakao.isInitialized());
  </script>
</head>
<body></body>
</html>

Supported web browser

The JavaScript SDK v1 supports the most commonly used web browsers. Here are the supported web browsers and versions by platform.

Browser / Platform Android iOS macOS Windows
Chrome* O O O O
Edge* O O O O
Firefox* O O O O
Safari X O O X
Internet Explorer (IE) X X X O**

* JavaScript SDK v1 supports the latest two versions of Chrome, Edge, and Firefox.

** JavaScript SDK v1 supports IE 9 or higher. (Refer to Notice.)

Set up for hybrid app

To use the JavaScript SDK v1 for a web page on a hybrid application ("hybrid app"), develop a WebView as follows to work properly.

To integrate Kakao Login and Kakao Talk Sharing into a hybrid app using the JavaScript SDK v1, proceed the extra jobs as follows due to technological limitations.

  • Run the Kakao Talk application through Custom URL
  • Display a pop-up WebView

Here are the procedures to develop a WebView on the Android and iOS platforms.

For Android

The code snippets below are written in Kotlin.

Add package name

On Android 11 or higher, add the package name to the AndroidManifest.xml file to implement the Kakao Login and Kakao Talk Sharing features using the JavaScript SDK v1. Otherwise, the Android Framework blocks the API calls.

<manifest package="com.example.sample">
    <queries>
        <package android:name="com.kakao.talk" />
    </queries>
    ...
</manifest>

Launch Kakao Talk

To log in with Kakao or send a Kakao Talk Sharing message, the JavaScript SDK v1 creates a URL to run Kakao Talk and makes a call. In general, a web browser starts Kakao Talk through the URL.

Use Intent URI to run an app through a WebView on the Android app. Refer to Android Intents with Chrome for more details.

Create Intent URI for the JavaScript SDK v1 to run Kakao Talk and make a call. Override the WebViewClient#shouldOverrideUrlLoading method in WebView, parse intent and run Activity.

webView = // main WebView

// common settings
webView.settings.run {
    javaScriptEnabled = true
    javaScriptCanOpenWindowsAutomatically = true
    setSupportMultipleWindows(true)
}

webView.webViewClient = object: WebViewClient() {

    override fun shouldOverrideUrlLoading(view: WebView,request: WebResourceRequest): Boolean {
        Log.d(TAG, request.url.toString())

        if (request.url.scheme == "intent") {
            try {
                // Create Intent 
                val intent = Intent.parseUri(request.url.toString(), Intent.URI_INTENT_SCHEME)

                // run an app if there is an executable app.
                if (intent.resolveActivity(packageManager) != null) {
                    startActivity(intent)
                    Log.d(TAG, "ACTIVITY: ${intent.`package`}")
                    return true
                }

                // Load the WebView if there is Fallback URL
                val fallbackUrl = intent.getStringExtra("browser_fallback_url")
                if (fallbackUrl != null) {
                    view.loadUrl(fallbackUrl)
                    Log.d(TAG, "FALLBACK: $fallbackUrl")
                    return true
                }

                Log.e(TAG, "Could not parse anythings")

            } catch (e: URISyntaxException) {
                Log.e(TAG, "Invalid intent request", e)
            }
        }

        // Implement the rest logic for a service.

        return false
    }
}

Display a pop-up WebView

Use a pop-up window to implement some functionalities in the JavaScript SDK v1 for a better user experience. Make a WebView created or deleted according to window.open() and window.close() calls.

After setting WebChromeClient for WebView, the following methods are called when a pop-up funcution starts in the JavaScript.

webView = // Main WebView
webViewLayout = // The layout that the WebView is included 

// Common settings 
webView.settings.run {
    javaScriptEnabled = true
    javaScriptCanOpenWindowsAutomatically = true
    setSupportMultipleWindows(true)
}

webView.webChromeClient = object: WebChromeClient() {

    /// ---------- Open pop-up  ----------
    /// - Use a pop-up for Kakao Login in the JavaScript SDK. 
    /// - Must create a seperate WebView when calling window.open() 
    ///
    override fun onCreateWindow(
        view: WebView,
        isDialog: Boolean,
        isUserGesture: Boolean,
        resultMsg: Message
    ): Boolean {

        // Create a WebView 
        var childWebView = WebView(view.context)

        // Set the same WebView as a parent WebView.  
        childWebView.run {
            settings.run {
                javaScriptEnabled = true
                javaScriptCanOpenWindowsAutomatically = true
                setSupportMultipleWindows(true)
            }
            layoutParams = view.layoutParams
            webViewClient = view.webViewClient
            webChromeClient = view.webChromeClient
        }

        // Add a WebView to the layout
        webViewLayout.addView(childWebView)
        // TO DO: It is recommended to manage a seperate WebView
        //       to handle navigation action of users
        //       such as onBackPressed() besides adding a layout.
        //   ex) childWebViewList.add(childWebView)

        // Syncronize between WebViews 
        val transport = resultMsg.obj as WebView.WebViewTransport
        transport.webView = childWebView
        resultMsg.sendToTarget()

        return true
    }

    /// ---------- Close a pop-up  ----------
    /// - Must close the created WebView when window.close() is called. 
    ///
    override fun onCloseWindow(window: WebView) {
        super.onCloseWindow(window)

        // Remove a pop-up from the layout 
        webViewLayout.removeView(window)
        // TO DO: It is recommended to manage a seperate WebView array
        //       to handle navigation action of users
        //       such as onBackPressed() besides adding a layout.
        //   ex) childWebViewList.remove(childWebView)
    }
}

For iOS

The code snippets below are written in Swift.

Launch Kakao Talk

To log in with Kakao or send a Kakao Talk Sharing message, the JavaScript SDK v1 creates a URL to run Kakao Talk and makes a call.

On iOS devices, an app is launched through Custom URL Schemes or Universal Links. If a Universal Link is invoked, a web browser launches Kakao Talk through the URL. The JavaScript SDK supports the Universal Link.

On the other hand, if a Custom URL Scheme is invoked, process as follows for a WebView. Otherwise, an error occurs. Kakao Talk only starts when opening the URL on a WebView through the open(_ url:) method.

func webView(_ webView: WKWebView,
             decidePolicyFor navigationAction: WKNavigationAction,
             decisionHandler: @escaping (WKNavigationActionPolicy) -> Void
) {
    print(navigationAction.request.url?.absoluteString ?? "")
    
    // If the Custom URL Scheme is invoked, open(_ url:) is called. 
    if let url = navigationAction.request.url , ["kakaolink"].contains(url.scheme) {

        // If the system can handle the url, Kakao Talk is launched.
        if UIApplication.shared.canOpenURL(url) {
            UIApplication.shared.open(url, options: [:], completionHandler: nil)
        }

        decisionHandler(.cancel)
        return
    }
    
    // Implement the rest logic for your service.


    decisionHandler(.allow)
}

Display a pop-up WebView

Use a pop-up window to implement some functionalities in the JavaScript SDK v1 for a better user experience. For this, make a WebView created or deleted according to window.open() and window.close() calls.

After setting WKUIDelegate for WebView, the following methods are called when a pop-up function starts in JavaScript.

class ViewController: UIViewController, WKUIDelegate, WKNavigationDelegate {

    // Manage a list of WebViews 
    var webViews = [WKWebView]()

    ...

    /// ---------- Open pop-up  ----------
    /// - Use a pop-up for Kakao Login in the JavaScript SDK. 
    /// - Must create a seperate WebView when calling window.open() 
    ///
    func webView(_ webView: WKWebView,
                 createWebViewWith configuration: WKWebViewConfiguration,
                 for navigationAction: WKNavigationAction,
                 windowFeatures: WKWindowFeatures
    ) -> WKWebView? {
        guard let frame = self.webViews.last?.frame else {
            return nil
        }

        // If creating a WebView and returning the WebView, the WebView becomes a child of the current WebView as a parent
        return createWebView(frame: frame, configuration: configuration)
    }

    /// ---------- Close a pop-up  ----------
    /// - Must close the created WebView when window.close() is called. 
    ///
    func webViewDidClose(_ webView: WKWebView) {
        destroyCurrentWebView()
    }

    // An example of methods to create a WebView 
    func createWebView(frame: CGRect, configuration: WKWebViewConfiguration) -> WKWebView {
        let webView = WKWebView(frame: frame, configuration: configuration)
        
        // Set delegate
        webView.uiDelegate = self
        webView.navigationDelegate = self
                
        // Add to the layout 
        self.view.addSubview(webView)

        // Add to the list of WebViews 
        self.webViews.append(webView)

        // Add other views to optimize for a service environment 

        
        return webView
    }

    // an example of methods to delete a WebView  
    func destroyCurrentWebView() {
        // Remove a WebView from the layout abd list of WebViews
        self.webViews.popLast()?.removeFromSuperview()
    }

}
JavaScript